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

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

本文关键字：视频 播放 最后一个 HTML5 为什么 遍历 循环 Javascript For      更新时间：2023-09-26

我正在尝试将所有源视频路径添加到名为源的数组中。然后，我正在尝试使用我的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]值，并且播放器每次只播放最后一个值。我不明白为什么会这样！感谢您的帮助。

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

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

我明白你想做什么。为此，您需要了解以下概念：-1.循环不会等待您的代码播放所有视频。它是异步的。当你的代码转到player.play（）函数时，计数器达到最后一个值，也就是你的最后一个视频，这就是你遇到这个问题的原因。

要解决这些问题，您需要了解回调和设置超时概念。

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 秒，依此类推。您可以设置希望视频播放的时间。

相关文章：