Question

我有两个视频源通过ajax输出到我的页面（第二个是隐藏的）。我播放第一个并将一个事件绑定到它上面，这样当它结束时，播放并显示下一个视频，然后第一个视频暂停，重新回到0，然后继续进行。

这是我的代码。

function queueVideos(num, amount) {

    if (num < amount) {
        document.getElementById('video-element-'+num).addEventListener('ended', playNextClip, false);
        function playNextClip() {
            var nextVid = num + 1;
            $( '#video-element-' + nextVid ).show().get(0).play();
            $( '#video-element-' + num ).hide();
            document.getElementById( 'video-element-' + num ).pause();
            document.getElementById( 'video-element-' + num ).currentTime = 0;
            queueVideos(nextVid, amount)
        }
    }

    if (num == amount) {
        document.getElementById('video-element-'+num).addEventListener('ended', playFirst, false);
        function playFirst() {
            $( '#video-element-1' ).show().get(0).play();
            $( '#video-element-' + num ).hide();
            document.getElementById( 'video-element-' + num ).pause();
            document.getElementById( 'video-element-' + num ).currentTime = 0;
            queueVideos(1, amount);
        }
    }

}

代码在一个ajax函数中调用，该函数向我提供从其他地方获取的数据的数量和数量，因为参数可以说我正在运行它：

queueVideos(1, 2);

我的问题是，大约1分钟后，剪辑之间的过渡会变得迟钝，剪辑会意外暂停，最终浏览器（镶边）执行缓慢。

我该如何解决这个问题？

谢谢！

Answer 1

我发现将playFirst（）函数更改为不包括queueVideos（1，amount）;解决了这个问题！我没有意识到我只需要添加一次事件监听器。哇噢！

通过视频源循环会降低Chrome

1 个答案: