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