css - 使用进度条将视频加载到网页之前的最佳方式

Question

我想在使用 html5 css 和 javascript 的网站上播放大约 30 秒的视频。我想要的是确保视频在播放之前已加载，以便播放时不会中断。

任何快速简单的解决方案。

Answer 1

您需要实现 javascript 才能实现您的目标。

您可以绑定(bind)“缓冲”事件，但是(至少在 Chrome 中)这工作正常，除了它不会调用最后一个“缓冲”事件(即它将检测到 90%...94%... 98%...但不会调用 100%)。

注意:最新版本的 jQuery 应该使用 .prop()而不是 .attr()

为了解决这个问题，我使用 setInterval() 每 500 毫秒检查一次缓冲区(其中 $html5Video 是您的 <video> 元素:

var videoDuration = $html5Video.attr('duration');

var updateProgressBar = function(){
    if ($html5Video.attr('readyState')) {
        var buffered = $html5Video.attr("buffered").end(0);
        var percent = 100 * buffered / videoDuration;

        //Your code here

        //If finished buffering buffering quit calling it
        if (buffered >= videoDuration) {
                clearInterval(this.watchBuffer);
        }
    }
};
var watchBuffer = setInterval(updateProgressBar, 500);