在视频加载之前添加进度栏

Question

How to add loader before video loading? I have used video-slider on my site also add pagepilling.js for video scroll. My video slider and video scroll with pagepilling.js working well dynamically.

Now I want to add before video loading showing a video progress-bar and an image, after video loading playing the video and hide image and progress-bar. I have found a site using this, but I don't know how to do that? Please see the demo site and suggest me what I will do? I have not used any code because my code is working well. I need to add video-loading progress bar like the demo. How can I do that?

DEMO

Answer 1

The HTML5 Media API includes events that you can listen for and react to that allows you do things like this. The API is here:

• https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

It includes the following which are of interest in your case (from the above link):

• canplay: "Sent when enough data is available that the media can be played, at least for a couple of frames. This corresponds to the HAVE_ENOUGH_DATA readyState."
• progress: "Sent periodically to inform interested parties of progress downloading the media. Information about the current amount of the media that has been downloaded is available in the media element's buffered attribute."

You can use these to achieve your requirement, for example, by:

• on page load, initially show the image you want in place of the video along with a progress bar with the progress initially at zero.
• Add an event listener for the loading progress and update the progress bar when you get updates to this listener.
• Add an event listener for the loading complete/canplay event and remove the progress bar and image, and show and play the video when this event fires.

As an example, you can listen for the canplay event like this:

var yourVideo = document.getElementById("yourVideo");
yourVideo.oncanplay = function() {
    //Add your code here to remove the image,
    //remove the progress bar and
    //show and start the video
};