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

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

但是，我还希望在加载开始时，通过将海报图像替换为加载图像来显示加载图像，以实现慢速连接

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

因此，当检测到在按下播放按钮之前不会加载时，如何显示播放海报图像

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

更新

或者您可以使用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);

---

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

$（窗口）.on（'load'，function（））{
var myVideo=$（'video'）；
if（myVideo.prop（'readyState'）<1和&myVideo.prop（'networkState'）！=2）{
//没有自动加载代码
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);
    }   
});

$（窗口）.on（'load'，function（））{
var myVideo=$（'video'）；
if（myVideo.prop（'readyState'）<1和&myVideo.prop（'networkState'）！=2）{
//可能没有自动加载代码
setTimeout（函数（）{
if（myVideo.prop（'readyState'）<1和&myVideo.prop（'networkState'）！=2）{
//没有自动加载代码
myVideo.prop（'poster'，'noloading.jpg'）；
}
}, 1000);
}   
});

假设正在加载，我需要检测是否没有加载。我没有在此网站上使用jQuery。为什么不使用它？说来话长，我在jQuery之前使用Javascript的次数太多了，我通常可以在没有它或其他库的情况下解决问题，只有少数例外。现在，随着javascript使用方式、html5和css3浏览器统一性的提高，在我看来，它真的不是一个必要的工具。我可以理解为什么它过去在选择器上很有用，但现在可以用常规Javascript轻松地跨浏览器实现。而且我只是想知道事情如何运作的更详细的细节，以便对语言有一个全面的理解。我明白你的意思。希望对您有所帮助。在窗口加载时，尽管networkState为3，但即使即将进行预加载。在这种情况下，readyState应大于0。如果使用settimeout延迟，会发生什么？看到上面了吗？如果可能的话，我真的不想使用定时事件，我认为这不会太可靠。

$(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);
    }   
});