我有两个视频源通过 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) 执行缓慢。
我该如何解决这个问题？
谢谢!
最佳答案
我发现将函数 playFirst() 更改为不包含 queueVideos(1, amount);解决了问题!我没有意识到我只需要添加一次事件监听器。哇哦!
关于javascript - 循环播放视频源会减慢 Chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33930122/