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

使用HTML5视频循环预加载网站

1 个答案: