在视频加载前添加进度栏

Question

如何在视频加载前添加加载程序？我已经使用视频滑块在我的网站上也添加了pagepilling.js的视频卷轴.我的视频滑块和视频卷轴与pagepilling.js很好地动态工作。

现在我想在视频加载之前添加显示视频进度条和图像，在视频加载后播放视频并隐藏图像和进度条。我已经找到一个网站使用这个，但我不知道如何做？请看演示网站，并建议我将做什么？我没有使用任何代码，因为我的代码运行良好。我需要添加像演示一样的视频加载进度条。我怎么能这么做？

演示

Answer 1

HTML5媒体API包括您可以监听和响应的事件，这些事件允许您这样做。API在这里：

• 事件

它包括对您的情况感兴趣的下列内容(来自上述链接)：

• canplay：“当有足够的数据可以播放媒体时发送，至少可以播放几帧，这与HAVE_ENOUGH_DATA readyState相对应。”
• 进度：“定期发送，通知感兴趣方下载媒体的进度。有关已下载媒体当前数量的信息可在媒体元素的缓冲属性中获得。”

您可以使用这些来实现您的需求，例如：

• 在页面加载中，首先显示您想要取代视频的图像，以及一个进度条，初始进度为零。
• 为加载进度添加一个事件侦听器，并在得到此监听器的更新后更新进度条。
• 为加载完整/canplay事件添加一个事件侦听器，并删除进度条和图像，并在此事件触发时显示和播放视频。

例如，您可以像下面这样侦听canplay事件：

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
};