Javascript/HTML 5視頻 - 檢測視頻是否正在加載

Question

由於IOS阻止自動加載視頻，因此需要添加一個'海報'圖像來指示播放按鈕（在這種情況下）。

但是我也想通過在加載開始時通過交換加載圖像的海報圖像來顯示用於慢速連接的加載圖像。

問題是在加載圖像之前的播放按鈕顯示一秒鐘的正常連接。

那麼，如何才能顯示播放海報圖像，以便在檢測到按下播放按鈕之前不會發生負載。

Answer 1

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

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

UPDATE

或者你可以使用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屬性的值不是'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); 
    } 
});