Question

如何在视频加载前添加加载程序？我在我的网站上使用了视频滑块，也为视频滚动添加了pagepilling.js。我的视频滑块和视频滚动，pagepilling.js动态运行良好。

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

DEMO

Answer 1

HTML5 Media API包含您可以监听并做出反应的事件，允许您执行此类操作。 API在这里：

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

它包括以下您感兴趣的案例（来自上述链接）：

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

您可以使用它们来满足您的要求，例如：

在页面加载时，最初显示您想要的图像代替视频以及进度条，其中进度最初为零。
为加载进度添加事件侦听器，并在获得此侦听器的更新时更新进度条。
为loading complete / 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
};

在视频加载前添加进度条

1 个答案: