使用timeupdate和loadedmetadata事件循环访问HTMl5视频标记

时间：2015-04-10 08:36:19

标签： javascript jquery html5 html5-video

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

最初我有它，所以我交换了视频文件的来源，但我发现它比拥有几个视频标签慢，并且使用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>

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

2 个答案:

答案 0 :(得分：1)

问题

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

这个默认值建议为metadata，但不一定是这种情况，如果是none，那么如果获得无间隙播放的数据，将会出现问题。下一个视频已加载到ended。

我觉得目前的方法是错误的＆＃34;在任何情况下（一次产生多个视频元素），我没有进入代码来调试/分析视频停止的原因。

我宁愿提出以下更改 -

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

可能的解决方案

我会使用＆＃34;双缓冲＆＃34;原则。也就是说，只有两个视频元素在它们之间切换。

该过程可能如下所示：

  • 将所有视频源存储在一个数组中（随意随意）
  • 将preload两个元素定义为metadata，隐藏一个并使用变量/标记来跟踪当前可见元素
  • 开始加载第一个视频。衡量从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事件将产生多少负载，因为我还没有对其进行测试。

答案 1 :(得分：0)

问题是Safari，它在IE，Chrome和Firefox上运行良好，偶尔挂断。我最终使用Ken的建议只使用了2个容器但是在野生动物园中它仍然很糟糕。基本上你会在实际开始播放前看到视频元素。

为我排序的是添加一个事件监听器，用于在新视频上“播放”，并在事件监听器内添加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>

这样做也消除了偶尔在其他浏览器上崩溃/挂起（周末在Chrome和Firefox上运行的页面，当我今天检查它们时它们工作正常）。

相关问题
最新问题