Javascript/HTML 5 视频 - 检测视频是否未加载

Question

由于 IOS 阻止自动加载视频，因此有必要添加“海报”图像来指示播放按钮(在本例中)。

但是，我还想通过在加载开始时将海报图像替换为加载图像来显示慢速连接的加载图像。

问题出在正常连接上，播放按钮在加载图像之前会显示一瞬间。

那么，当检测到按下播放按钮之前不会发生加载时，如何显示播放海报图像。

Answer 1

if ( yourVideoElement.readyState === HAVE_ENOUGH_DATA ) {
            // it's loaded
        }

https://developer.mozilla.org/en/DOM/HTMLMediaElement

更新

或者你可以使用 jQuery:

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

var updateProgressBar = function(){
    if ($html5Video.prop('readyState')) {
        var buffered = $html5Video.prop("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);