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

Posted 2023-05-07

【中文标题】将视频加载到带有进度条的网页的最佳方法

【英文标题】：Best way to load a video before into a web page with a progress bar

【发布时间】：2018-02-19 04:36:30

【问题描述】：

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

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

【问题讨论】：

HTML5 Video - Percentage Loaded?的可能重复

【参考方案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);