Javascript循环遍历所有视频，但只播放最后一个HTML5视频。为什么？
Javascript循环遍历所有视频，但只播放最后一个HTML5视频。为什么？
提问于 2015-06-20 18:29:02
我正在尝试将我的所有源视频路径添加到名为source的数组中。然后，我试着用我的HTML5视频播放器来播放它们。但是，当我运行循环时，(使用警报消息进行调试)--每次只播放最后一个视频，尽管它循环遍历所有的视频名称。这是为什么？！
<script>
var i=1;
var sources = new Array(4);
var oggVid = document.getElementById('oggSource');
var mp4Vid = document.getElementById('mp4Source');
var webmVid = document.getElementById('webmSource');
var player = document.getElementById('videoPlayer');
for (i=1; i < sources.length; i++) {
sources[i]="/videolibrary/"+i+".webm";
var srcName=sources[i];
// alert(i + " " + sources.length + " " + srcName);
}
function next() {
player.pause();
for (i=1; i < sources.length; i++) {
webmVid.setAttribute('src', sources[i]);
mp4Vid.setAttribute('src', sources[i]);
oggVid.setAttribute('src', sources[i]);
player.load();
player.play();
alert(i + " " + sources.length + " " + sources[i]);
}} </script>警报消息的输出(当我单击Next按钮(加载下一个函数)时)显示所有源值，并且每次播放器只播放最后一个值。我不明白为什么会这样！谢谢你的帮助。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-06-20 18:47:32
每次单击next时，您都不想遍历所有的视频。相反，你只想升级到下一个视频。试试这个：
var currentVideo = 1;
function next() {
player.pause();
currentVideo++;
if(currentVideo >= sources.length) currentVideo = 1;
webmVid.setAttribute('src', sources[currentVideo]);
mp4Vid.setAttribute('src', sources[currentVideo]);
oggVid.setAttribute('src', sources[currentVideo]);
player.load();
player.play();
alert(currentVideo + " " + sources.length + " " + sources[currentVideo]);
}Stack Overflow用户
发布于 2015-06-20 19:59:11
我得到了您想要的do.For --您需要理解以下概念：-1.循环不会等待您的代码播放所有的videos.It是异步的.By --当您的代码转到player.play()函数时，计数器到达最后一个值，这是您最后一个视频.that的原因。
为了解决这些问题，您需要了解CallBack和setTimeout的概念。
var i=0;
function next() {
setTimeout (function()
{
i++;
player.pause();
webmVid.setAttribute('src', sources[i]);
mp4Vid.setAttribute('src', sources[i]);
oggVid.setAttribute('src', sources[i]);
player.load();
player.play();
next();
}
},6000)
} 在这里，代码所做的是设置i=1，播放您的视频，暂停6秒，然后将计数器增加到2，再次播放6秒的视频等等。您可以设置要运行视频的时间。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30957487
复制相关文章
相似问题
腾讯云开发者
