使用HTML5視頻循環預加載網站

Question

我正在開發一個使用大部分視頻背景的網站。 背景設置為循環。 我們還想在站點加載資源時實現預加載映像。

基本結構只是一些簡單的jQuery：

$(window).load(function() {
$(".loader").fadeOut("slow");
})

和HTML：

<div class="loader"></div>

在body標簽之后。

這個問題是服務器將多個“ 206部分內容”數據包發送到瀏覽器，並且預加載圖像只是掛起，因為我認為服務器正在發送視頻的小數據包以進行加載，或者只是一遍又一遍地請求文件-我真的不知道

我試圖考慮一些解決方法，但是經過數小時的搜索，我沒有提出任何解決方案。

我想知道是否有一種方法可以讓此腳本忽略<video>標記，而僅等待頁面加載其他資源？

Answer 1

我已經成功地用JS構建了視頻，然后使用imagesLoaded進行播放。 我沒有測試下面的代碼，但是我認為它可以工作。

https://github.com/desandro/imagesloaded

    var videoWrap = document.getElementById('videoWrap'); 
    var video = document.createElement('video');
    videoWrap.appendChild(video);       
    video.setAttribute("id","myVideo");
    video.controls = false; 

    if ( video.canPlayType('video/mp4') ) {
        video.src = '/path/video.mp4'; 
    } else {
        video.src = '/path/video.ogg'; 
    }

    video.load();

    /*
    video.oncanplaythrough = (function(){
        // useful for some stuff
    })();
    */

    $('#imagesContainer').imagesLoaded( function() {
        video.play();
    });