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

Answer 2

你必须检查两件事，首先是networkState和readyState，另外你必须确保preload属性的值不是＆＃39; none＆＃39;或者您正在使用自动播放属性。在这种情况下，您可以编写以下代码（最好等待直到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);
    }   
});

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

2 个答案: