循环播放视频源会减慢 Chrome

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 分钟后，剪辑之间的过渡变得迟缓，剪辑意外暂停，最终浏览器 (chrome) 运行缓慢。

我该如何解决这个问题？

谢谢！

Answer 1

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