Javascript For 循环遍历所有视频，但只播放最后一个 HTML5 视频。为什么？

Question

我正在尝试将所有源视频路径添加到名为 sources 的数组中。然后，我尝试使用我的 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>

警报消息的输出（当我单击“下一步”按钮（加载下一个函数）时）快速连续显示所有源[i] 值，播放器每次只播放最后一个值。我不明白为什么会这样！谢谢你的帮助。

Answer 1

您不希望每次单击下一步时都循环播放所有视频。相反，您只想前进到下一个视频。试试这个：

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]);
}

Answer 2

我明白你的意思 do.For 你需要了解以下概念：- 1.Loop 不会等待您的代码播放所有 videos.It 是异步的。当您的代码转到 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 秒，依此类推。您可以将视频的播放时间设置为运行。

Javascript For 循环遍历所有视频，但只播放最后一个 HTML5 视频。为什么？

Javascript For loop loops through all the videos but only plays the last HTML5 video. Why?

javascript

html

html5-video

opera