用HTML5视频循环预加载网站

Preloading site with HTML5 video loop

本文关键字：加载 网站 循环 HTML5 视频      更新时间：2023-09-26

我正在开发一个使用视频背景的大片段的网站。背景设置为循环。我们还想在网站加载资源时实现一个预加载映像。

基本结构只是一些简单的jQuery:

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

和HTML:

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

就在CCD_ 1标签之后。

问题是，服务器向浏览器发送了多个"206部分内容"数据包，而预加载的图像却一直挂着，因为我认为服务器正在发送视频的小数据包来加载，或者只是一遍又一遍地请求文件——我真的说不清。

我试着想办法解决这个问题，但经过几个小时的搜索，我还没有想出任何解决方案。

我想知道是否有一种方法可以让这个脚本忽略<video>标记，只等待页面加载其他资源？

我已经成功地在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();
    });
相关文章：