Run HTML5 video after loading a certain amount
Can you tell me how to start HTML5 video after a certain amount has loaded? For example, if I have a 10 second video and I want it to start only when it has loaded for at least 5 seconds. How can I determine when this will happen?
Edit . We assume that the video is loading and is in a position .pause()
not in.stop()
source to share
You can read the property buffered
of the video element to see what time ranges were loaded. The property buffered
is a set of loaded timeslots; you can read the start and end of the n
th range with buffered.start(n)
and buffered.end(n)
. Since you are interested in the end of the first range, you can read the number of seconds loaded on some video videoElm
with videoElm.buffered.end(0)
.
A <video>
fires events progress
to indicate that it has loaded a new chunk of data (and hence the end time of some interval in time buffered
increases).
You can check if the loaded buffer is enough after each event progress
:
var someVideo = document.getElementById("myVideoId");
someVideo.addEventListener("progress", function playOnLoad(e) {
var theVideo = e.target;
if(theVideo.buffered.length > 0 && // if we have a buffer
theVideo.buffered.end(0) >= 5) { // if first buffer is at least 5 secs
theVideo.play();
theVideo.removeEventListener(playOnLoad);
}
});
If you're really wondering if a video can safely play without interruption, the browser uses an event canplaythrough
. The browser will fire this event when it predicts that the video download speed will allow it to play without interruption (but sometimes it might not be right if the download speed changes suddenly).
source to share
I don't think this is possible as each browser has its own dimension in seconds when the video is ready to be played, for example. the browser controls the loading of the buffer.
The attribute preload
on the video element gives you some form of control, but not in seconds, not according to cross browser.
Check the table on this page.
I'm not sure why you are in control of this. The only thing you should be concerned about is what the video might play.
this.video.on('canplaythrough', function () {
this.video[0].play();
}.bind(this));
If for some reason you need to capture the event earlier, check this page for other events.
source to share