将视频加载到带有进度条的网页的最佳方法

Question

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

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

Answer 1

你需要实现 javascript 来实现你想要的。

您可以绑定“缓冲”事件，但是（至少在 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);