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

Question

因为 IOS 阻止自动加载视频，所以有必要添加一个“海报”图像来指示播放按钮（在这种情况下）。

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

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

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

Answer 1

您必须检查两件事，首先是 networkState 和 readyState，另外您还必须确保 preload 属性的值不是“none”，或者您正在使用自动播放属性。在这种情况下，您可以编写以下代码（最好等到 window.onload）：

$(window).on('load', function(){
    var myVideo = $('video');
    if(myVideo.prop('readyState') < 1 && myVideo.prop('networkState') != 2){
        //no automatically loading code
        myVideo.prop('poster', 'noloading.jpg');
    }    
});

这个没有测试，readyState == 0 表示没有数据，networkState 2 表示不尝试加载。

超时：

$(window).on('load', function(){
    var myVideo = $('video');
    if(myVideo.prop('readyState') < 1 && myVideo.prop('networkState') != 2){
        //probably no automatically loading code
        setTimeout(function(){
            if(myVideo.prop('readyState') < 1 && myVideo.prop('networkState') != 2){
                //no automatically loading code
                myVideo.prop('poster', 'noloading.jpg');
            }
        }, 1000);
    }   
});

Answer 2

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);