I would like to keep the poster gif displayed until the full video has loaded. It seems like this is not possible but does anyone else have a work around.`
<video id="wrVideo" controls poster="/images/busy.gif"
controlsList="nodownload" onerror="myFunction()" preload="auto" autoplay>
The gif loads but since chrome will start playing as soon as it thinks it has enough to play, I cannot manipulate this. I can check the buffered value at various times but not sure how I can implement this to only play the video when more than half of the video duration has buffered.
vid.oncanplaythrough = function() {
if(vid.buffered.end(0) < vid.duration){
vid.pause;
}
}
something like this but rather load the gif/spinner while the buffering reaches that point. Any ideas?
I finally figured this out and it involved a hack around chrome loading playable segments at a time. I forced the browser to download the entire video and then passed the blob url to the video source and voila, the preloader spins while the video is still loading which takes a while.
Related
I've run into a strange problem with video playback on mobile - in general, the videos playback fine on phones, but if the same phone has visited the site more than a few times (say 4 or 5), the video will no longer play and instead display a still image. Here is the format of the HTML for the videos:
<video playsinline autoplay muted loop id="waterBackground" src="../assets/water1-forwards_compressed.mp4"></video>
There is one line of JS changing the video playback rate, but that's it:
$("#waterBackground")[0].playbackRate = 0.8;
All of the HTML videos use this exact format, and every phone I have tested this on (except iphone < 5) has no trouble playing the first the first few times. But things stop working after that. When I clear the browser history and close and reopen the app, the video is working again. Any ideas why this might be happening and how I can fix it?
Probably a silly question but are there any ways to force playback of a HTML5 <video> earlier than the DOMcontentloaded event?
The video is hardcoded in a liquid file with the following attributes:
<video
poster="./poster.webp"
src="./545645660.sd.mp4"
loop muted playsinline autoplay preload="auto" type="video/mp4" disableRemotePlayback>
</video>
Since it's a hero background video, it needs to start playback as fast as possible but there's about a 2 second delay which looks bad. I've found that disabling JavaScript in Dev Tools will make it load instantaneously so it appears the large amounts of scripts are causing the delay but not sure if there's a way to prioritize playing back the video.
Browsers tend to delay videos downloading u til after all the JS, CSS, HTML, images - since these are required to load the page. Perhaps you can defer some of the scripts to load later?
You could also remove the poster - since that downloads BEFORE the video, and is probably never seen - as the video autoplays.
I have a 10 second video clip, and a full video that the video clip is from on my site. the 10second video is set to (autoplay, preload=auto, and muted), and the full video is set to (preload=none) and is set to only load when clicked. the videos are both .mp4.
I publish my site to IIS on my computer, and I go to localhost, and the site will load fine. The 10second video loads fine on my video carousel, but when I click it to go to the dedicated page about the video the 10second video will either load like it should, or either it will take a few extra seconds to load, or doesn't load at all??
The full video will load perfect every time even if the 10second video doesn't load I can still click the space where it should be (I have a div that's clicked that activates the full video not the click of the clip), and the full video will open, and start playing fine?
I cannot figure out what is causing this issue since the video will load fine on the main page even if 5 other vidoes are loading on the carousel at the same time, yet when its on its own page it just doesn't load almost every time..? I try clearing cache, and reloading the page, but still 90% of the time it just doesn't load?
so can someone tell me what could be causing a 10second video 2.2mb to not load when preload is on, but a video that's 90.2mb will load when activated instantly even though preload is off?? even if I reload the page, and click to load the full video right away it will load almost instantly?? I literally have the same code on the main page to get the video clip and play it which works every time!
10second clip: I have divs around these video clips that have an id so the div can be loaded on other pages which loads the videos.
<video preload="auto" src="#Url.Content("~/Content/Video/")#item.clip" autoplay loop="" muted style="width:100%;"></video>
full video:
<video id="videoClick1" controlsList="nodownload" src="#Url.Content("~/Content/Video/")#item.selectFile" preload="none" controls style="width:100%;"></video>
here is where the videos get loaded:
<div id="fullVideoClick">
<div id="video2">
</div>
<div id="video1">
</div>
</div>
<script>
$("#video1").load("/VideoCarousels/index #profileVideo1");
$("#video2").load("/VideoCarousels/index #carouselVideo1");
</script>
and on the main page:
<div id="video1">
</div>
<script>
$("#video1").load("/VideoCarousels/index #carouselVideo1");
</script>
the only thing I can think of is the preload for the video clip isn't activating sometimes for some reason since it works perfect about 5% of the time, and 5% of the time it takes longer than usual, but still loads, and the other 90% of the time it just never loads, yet on the main page it loads perfect 95% of the time, and the other 5% of the times it will load eventually, but takes longer then normal.
--edit--
I have set my 5 video carousel to play the same video clip on each slide, and it seems to load the video 3 out of 5 slides when I reload the page after I clear cache, but when I reload the page the second time it loads them all fine, but still on the dedicated pages it just doesn't load the clip. I also added in
$(document).ready(function(){ ... }); which at first loaded the clip, which made me hopeful that that would be the answer, but after refreshing the page again the clip didn't load anymore even after clearing cache it was random if it was going to load or not.
--edit2--
found the weirdest thing! I inspected elements, and deleted the full video from poping up because behind it is the video clip so I was able to see the video controls for the video clip, and whats weird is the video clip is actually loaded fine, but the weirdest thing is that clicking play does nothing?? I click play, and then I have to click a few seconds into the video, and then it starts playing??? anyone have ANY idea why this is happening??
You haven't wrapped your jQuery code in
$(document).ready(function(){ ... });
Always a good place to start with any load issue.
I have multiple HTML5 videos <video> on one page. When I play first, it starts downloading. But when I pause or stop it, download continues. When I play next video on the same page, there are two video downloads in the same time.
set the attribut preload="none" in the video tags or preload="metadata" if you want the length and other data upfront.
Question is similar as here. Try to use Media Source Extension.
Quick question: I have an HTML document playing HTML5 Audio. Nothing fancy. Textbook really.
<audio id="audioclip" preload="auto" loop >
<source src="audio/music01.ogg" type="audio/ogg">
</audio>
The same HTML document features an iframe containing a few Images. Clicking on one of these images browses to a page containing an autostart HTML5 video clip.
Of course now the audio from the parent AND the audio from the iframe video play at the same time.
Is there an EASY way to stop the parent audio playback from inside the iframe automatically when the autoplay video triggers?
I found some pretty complicated stuff for parent/child communication. Far to sophisticated for me. But I also found this little snippet:
jQuery(function($) {
parent.$("#parent_element").trigger(event);
} (window.jQuery));
Could I put that to use in my case?
Or are there alternatives?
Just getting into JavaScript a little more, atm I'd consider myself a newbie. :-\
Many Thanks!
PS: On video end the iframe page automatically browses back to the previous page. It would be super-nifty if the audio would resume playing at the Point IF it was playing before. If not then...well...not. But I reckon that would be much more complex?