加載Html5Video 100％然後顯示頁面

Question

我需要加載Html5視頻100％，然後我需要「播放」它並顯示我的網頁與視頻。

我需要這樣做，因爲我的視頻是有點大，它的啓動不帶負載100％，並凍結

Answer 1

你必須使用媒體來源擴展（MSE）來控制。否則，瀏覽器會做它認爲最好的，你將無法強制或保證瀏覽器會加載100％的視頻。

查看MSE here (intro)和here (specs)和here (use-case)。

Answer 2

創建JS元素：

var obj = document.createElement('video'); 
$(obj).attr('id', 'example_video_test'); 
$(obj).attr('width', '640'); 
$(obj).attr('data-height', '264'); 
$(obj).attr('controls', ' '); 
$(obj).attr('poster', '../oceans-clip.jpg'); 


source = document.createElement('source'); 
$(source).attr('type', 'video/mp4'); 
$(source).attr('src', '../oceans-clip.mp4'); 
$(obj).append(source); 


if (document.getElementById('example_video_test').readyState === 4) { 
    // it's loaded 
} 

PS：此代碼是未經測試可能需要一些改變

readyState == 4 ==> Enough data is available—and the download rate is high enough—that the media can be played through to the end without interruption.