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

Question

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

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

它在除 Safari 之外的所有浏览器中都运行良好，所以我开始寻找一种不同的方式来启动视频。在研究使用视频持续时间和时间更新之前，我只需要 "ended" 事件监听器。

我对当前解决方案的问题是它在 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，在无间隙播放时及时获取数据会有问题如果下一个视频在 ended.

加载

因为我觉得目前的方法在任何情况下都是“错误的”（一次生成多个视频元素），所以我没有深入研究 debug/analyze 视频停止的原因。

我宁愿提出以下更改 -

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

可能的解决方案

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

该过程可能如下所示：

将所有视频源存储在一个数组中（随意随机）
将两个元素的 preload 定义为 metadata，隐藏一个并使用 variable/flag 来跟踪当前可见元素
开始加载第一个视频。测量从 load() 到触发 canplay 事件的时间（存储为 preloadtime 之类的东西）。将 ~10% 的时间用于松弛，并使用这段时间触发下一个视频的预加载。
使用 requestAnimationFrame，轮询运行视频的 currentTime。 currentTime > duration - preloadtime 在隐藏的视频元素上设置源并调用 load() 时
使用 requestAnimationFrame 轮询 currentTime。当 currentTime >= duration - 33 在第二个元素上调用 play() 时，切换视频元素可见性。 33 代表 2 帧，或 33ms，以减少差距。这不是使用事件 ended，因为当 ended 被抛出时视频已经停止。
切换，重复

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

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

Answer 2

问题出在 Safari 上，它在 IE、Chrome 和 Firefox 上运行良好，偶尔会挂断。我最终使用了 Ken 关于只使用 2 个容器的建议，但它在 safari 中仍然很糟糕。基本上您会在视频元素真正开始播放之前看到它。

为我解决的问题是在新视频上为 "playing" 添加事件监听器，并在事件监听器中添加 1 秒超时。如果没有超时，在 Safari 上您仍会在新视频实际开始播放之前看到它。我还意识到用 z-index 而不是显示来切换视频更好。

以下是代码，以防有人在 Safari 或其他浏览器中遇到类似问题：

(function ($) {
    var FIAFE = FIAFE || {};
    $.extend(true, FIAFE, {
        fanboost: {
            index: 1,
            videoContainerId: 1,
            randomize: false,
            playlist: [
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/BEIJING1.mp4',
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/BEIJING2.mp4',
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/BEIJING3.mp4',
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/BEIJING4.mp4',
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/BUENOSAIRES1.mp4',
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/BUENOSAIRES2.mp4',
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/PUNTA2.mp4',
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/PUNTA3.mp4',
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/PUTRAJAYA1.mp4',
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/PUTRAJAYA2.mp4',
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/PUTRAJAYA3.mp4'
            ],
            playlistPosters: [
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/1.jpg',
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/2.jpg',
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/3.jpg',
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/4.jpg',
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/BUENOSAIRES1.jpg',
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/BUENOSAIRES2.jpg',
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/PUNTA2.jpg',
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/PUNTA3.jpg',
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/PUTRAJAYA1.jpg',
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/PUTRAJAYA2.jpg',
                'http://d3nqbzdvtsuedn.cloudfront.net/fbtmp/PUTRAJAYA3.jpg'
            ],
            video: null,
            videoDuration: null,
            bgvideo: function () {
                if (FIAFE.fanboost.video.currentTime < (FIAFE.fanboost.videoDuration - 1.5)) {
                    //Do Nothing
                } else {
                    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;
                        }
                    }

                    FIAFE.fanboost.video.removeEventListener("timeupdate", FIAFE.fanboost.bgvideo, false);
                    var newVid = document.getElementById("bgvid" + FIAFE.fanboost.videoContainerId);
                    newVid.setAttribute("poster", FIAFE.fanboost.playlistPosters[FIAFE.fanboost.index - 1]);
                    newVid.src = FIAFE.fanboost.playlist[FIAFE.fanboost.index - 1];
                    switch (FIAFE.fanboost.videoContainerId) {
                        case 1:
                            FIAFE.fanboost.videoContainerId = 2;
                            break;
                        case 2:
                            FIAFE.fanboost.videoContainerId = 1;
                            break;
                    }
                    newVid.play();

                    newVid.addEventListener("playing", function listener(e) {
                        setTimeout(function () {
                            FIAFE.fanboost.videoDuration = newVid.duration;
                            newVid.removeEventListener("playing", listener, false);
                            FIAFE.fanboost.video.style.zIndex = "-101";
                            FIAFE.fanboost.video = null;
                            FIAFE.fanboost.video = newVid;
                            newVid = null;
                            FIAFE.fanboost.video.addEventListener("timeupdate", FIAFE.fanboost.bgvideo, false);
                            FIAFE.fanboost.video.style.zIndex = "-100";
                        }, 1000);
                    }, false);
                }
            },
            load: function ($) {
                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.videoContainerId);
                    FIAFE.fanboost.video.setAttribute("poster", FIAFE.fanboost.playlistPosters[FIAFE.fanboost.index - 1]);
                    FIAFE.fanboost.video.style.zIndex = "-100";
                    FIAFE.fanboost.video.src = FIAFE.fanboost.playlist[FIAFE.fanboost.index - 1];
                    FIAFE.fanboost.videoContainerId = 2;
                    FIAFE.fanboost.video.play();

                    FIAFE.fanboost.video.addEventListener("playing", function listener(e) {
                        FIAFE.fanboost.videoDuration = FIAFE.fanboost.video.duration;
                        FIAFE.fanboost.video.addEventListener("timeupdate", FIAFE.fanboost.bgvideo, false);
                        FIAFE.fanboost.video.removeEventListener("playing", listener, 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: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video poster="" id="bgvid1" class="bgvid" preload="auto" muted src="">
</video>
<video poster="" id="bgvid2" class="bgvid" preload="auto" muted src="">
</video>

这样做也摆脱了其他浏览器上偶尔出现的 crash/hang（周末在 Chrome 和 Firefox 上离开了页面运行，当我今天查了一下）。

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

Cycling through HTMl5 video tags using timeupdate and loadedmetadata events

javascript

jquery

html

html5-video

问题

可能的解决方案