javascript - 循环播放视频源会减慢 Chrome

Question

我有两个视频源通过 ajax 输出到我的页面(第二个是隐藏的)。我播放第一个并将一个事件绑定(bind)到它，以便在它结束时播放和显示下一个视频，同时第一个视频暂停，倒带回 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 分钟后，剪辑之间的过渡变得迟缓，剪辑意外暂停，最终浏览器 (chrome) 执行缓慢。

我该如何解决这个问题？

谢谢!

Answer 1

我发现将函数 playFirst() 更改为不包含 queueVideos(1, amount);解决了问题!我没有意识到我只需要添加一次事件监听器。哇哦!