javascript - 使用 timeupdate 和loadedmetadata 事件循环浏览 HTMl5 视频标签

Question

我有一个网页，正在其中播放一系列背景视频。

最初我拥有它，所以我交换了视频文件的源，但我发现这比拥有多个视频标签并使用 display none/block 操作它们要慢。

它在除 Safari 之外的所有浏览器中都运行良好，因此我开始寻找不同的方式来启动视频。在考虑使用视频持续时间和时间更新之前，我只是有“结束”事件监听器。

我对当前解决方案的问题是，它在 Safari 中根本不起作用，并且在其他浏览器上播放几个视频后就会停止。

这是代码:

(function ($) {
    var FIAFE = FIAFE || {};
    $.extend(true, FIAFE, {
        fanboost: {
            index: 1,
            randomize: false,
            playlist: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
            video: null,
            videoDuration: null,
            bgvideo: function () {
                if (FIAFE.fanboost.video.currentTime < (FIAFE.fanboost.videoDuration - 0.5))
                {
                    console.log("currentTime is less than duration - 0.5");
                } else {
                    console.log("currentTime reached duration - 0.5");
                    if (FIAFE.fanboost.randomize) {
                        FIAFE.fanboost.index = Math.floor(Math.random() * (FIAFE.fanboost.playlist.length - 1 + 1) + 1);
                        if (FIAFE.fanboost.index >= FIAFE.fanboost.playlist.length || FIAFE.fanboost.index == 0) {
                            FIAFE.fanboost.index = 1;
                        }
                    } else {
                        FIAFE.fanboost.index++;
                        if (FIAFE.fanboost.index >= FIAFE.fanboost.playlist.length) {
                            FIAFE.fanboost.index = 1;
                            FIAFE.fanboost.randomize = true;
                        }
                    }
                    var currentVid = FIAFE.fanboost.video;
                    var newVid = document.getElementById('bgvid' + (FIAFE.fanboost.index));
                    
                    newVid.load();
                    newVid.addEventListener('loadedmetadata', function () {
                        FIAFE.fanboost.videoDuration = newVid.duration;
                        newVid.play();
                        newVid.style.display = 'block';
                        console.log("new videoDuration: " + FIAFE.fanboost.videoDuration);
                        newVid.addEventListener('timeupdate', FIAFE.fanboost.bgvideo, false);
                        newVid.removeEventListener('loadedmetadata', FIAFE.fanboost.bgvideo, false);

                        
                        currentVid.style.display = 'none';
                        currentVid.removeEventListener('timeupdate', FIAFE.fanboost.bgvideo, false);
                        FIAFE.fanboost.video = newVid;
                        
                    });
                    
                }
                    
            },
            load: function ($) {
                //Ventsi: It's not nice but will have to do for now.
                var isMobile = false;
                var agent = navigator.userAgent.toLowerCase();
                if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                    isMobile = true;
                }

                if (!isMobile) {
                    FIAFE.fanboost.video = document.getElementById('bgvid' + (FIAFE.fanboost.index));
                    FIAFE.fanboost.video.style.display = 'block';
                    FIAFE.fanboost.video.load();
                    FIAFE.fanboost.video.addEventListener('loadedmetadata', function () {
                        FIAFE.fanboost.videoDuration = FIAFE.fanboost.video.duration;
                        FIAFE.fanboost.video.play();
                        FIAFE.fanboost.video.addEventListener('timeupdate', FIAFE.fanboost.bgvideo, false);
                        FIAFE.fanboost.video.removeEventListener('loadedmetadata', FIAFE.fanboost.bgvideo, false);
                    });
                    
                }
            }
        }
    });
    $(function () { FIAFE.fanboost.load($); });
})(jQuery);

video.bgvid {
    position: fixed; right: 0; top: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background-color: transparent;
    display: none;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <video poster="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/1.jpg" id="bgvid1" class="bgvid" muted>
        <source src="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/BEIJING1.mp4" type="video/mp4">
    </video>
    <video poster="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/2.jpg" id="bgvid2" class="bgvid" muted>
        <source src="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/BEIJING2.mp4" type="video/mp4">
    </video>
    <video poster="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/3.jpg" id="bgvid3" class="bgvid" muted>
        <source src="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/BEIJING3.mp4" type="video/mp4">
    </video>
    <video poster="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/4.jpg" id="bgvid4" class="bgvid" muted>
        <source src="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/BEIJING4.mp4" type="video/mp4">
    </video>
    <video poster="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/BUENOSAIRES1.jpg" id="bgvid5" class="bgvid" muted>
        <source src="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/BUENOSAIRES1.mp4" type="video/mp4">
    </video>
    <video poster="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/BUENOSAIRES2.jpg" id="bgvid6" class="bgvid" muted>
        <source src="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/BUENOSAIRES2.mp4" type="video/mp4">
    </video>
    <video poster="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/PUNTA2.jpg" id="bgvid7" class="bgvid" muted>
        <source src="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/PUNTA2.mp4" type="video/mp4">
    </video>
    <video poster="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/PUNTA3.jpg" id="bgvid8" class="bgvid" muted>
        <source src="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/PUNTA3.mp4" type="video/mp4">
    </video>
    <video poster="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/PUTRAJAYA1.jpg" id="bgvid9" class="bgvid" muted>
        <source src="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/PUTRAJAYA1.mp4" type="video/mp4">
    </video>
    <video poster="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/PUTRAJAYA2.jpg" id="bgvid10" class="bgvid" muted>
        <source src="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/PUTRAJAYA2.mp4" type="video/mp4">
    </video>
    <video poster="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/PUTRAJAYA3.jpg" id="bgvid11" class="bgvid" muted>
        <source src="http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/PUTRAJAYA3.mp4" type="video/mp4">
    </video>

我想知道这是否可行，或者我是否遗漏了某些内容，以及是否有更有效的方法可以在上一个视频加载之前启动下一个视频。

Answer 1

问题

浏览器在处理所有视频元素的预加载和缓冲时会遇到问题。当 preload 未定义时，将由浏览器使用默认值。

建议默认为metadata，但情况不一定如此，如果是none，及时获取数据就会出现问题如果结束加载下一个视频，则无缝播放。

因为我觉得当前的方法在任何情况下都是“错误的”(一次生成多个视频元素)，所以我没有进入代码来调试/分析视频停止的原因。

我宁愿提出以下更改 -

(此外，海报图像并不是真正需要的，因为视频旨在连续播放。在这种情况下，删除这些图像将有助于减少一些带宽。)

可能的解决方案

我会为此使用“双缓冲”原则。也就是说，只有两个视频元素可以在之间切换。

该过程可能如下所示:

• 将所有视频源存储在一个数组中(随意随机)
• 将两个元素的预加载定义为元数据，隐藏其中一个并使用变量/标志来跟踪当前可见元素
• 开始加载第一个视频。测量从 load() 到触发 canplay 事件的时间(存储为类似 preloadtime 的形式)。添加约 10% 的松弛时间，并使用该时间触发下一个视频的预加载。
• 使用requestAnimationFrame，轮询正在运行的视频的currentTime。当currentTime>duration - preloadtime设置源并在隐藏视频元素上调用load()
• 使用requestAnimationFrame轮询currentTime。当 currentTime >=uration - 33 在第二个元素上调用 play() 时，切换视频元素可见性。 33代表2帧，即33ms，以减少间隙。这不是使用事件 ending，因为当抛出 ending 时，视频已经停止。
• 切换、重复

您可以将 preloadtime 的全局变量设置为 -1，然后用最大测量时间更新它(伪:if (newLoadtime > preloadtime) preloadtime = newLoadtime )，或为其创建平均值。

您可以使用 timeupdate 事件代替 requestAnimationFrame。后者限制了轮询的数量，我不确定 timeupdate 事件会产生多少负载，因为我没有测试过。