我如何随机播放一系列视频直到最后一个视频播放完毕，然后在 JS 中重新播放？

Question

我有一系列 mp4 视频，我需要在网站标题中随机显示而不重复。在最后一个视频播放后，它应该重新洗牌并重新开始。该序列需要在页面加载时开始。每个视频都需要有一个特定于该视频的悬停文本描述。

我正在尝试将这个随机播放代码与这个不重复播放列表的例子

我什至没有看到悬停文本，因为我无法让随机播放序列正常工作。我不是专家。

这是我尝试的当前版本。我知道事情的顺序是错误的，因为我得到了“未定义”的错误。

function shuffle(vids) {
    let currentIndex = vids.length,  randomIndex;
    while (currentIndex != 0) { 
             randomIndex = Math.floor(Math.random() * currentIndex); 
         currentIndex--;
         [vids[currentIndex], vids[randomIndex]] = [vids[randomIndex], vids[currentIndex]];
    }
        return vids;
        playvids();
}
function playvids() {
     var vids = ["vid1.mp4","vid2.mp4","vid3.mp4"];
     for(var i = 0; i < vids.length; ++i){
     document.getElementById("myvideo").addEventListener('ended', getnextfile);     
     document.getElementById("myvideo").src = "" + vids[i] + "";
     }
}                   
function getnextfile() {
     if(i >= vids.length){ 
          shuffle(vids);
     } 
     return vids[i++];  
        
}
} 
window.onload = playvids();

<video id="myvideo" src="" muted autoplay></video> 

window.onload 应该从数组中播放视频，然后事件监听器应该在视频结束时调用 getnextfile，它应该检查它是否是数组中的最后一个视频 - 如果是，则重新洗牌，如果不是，则递增 1 以播放数组中的下一个视频。我更希望它在第一次播放之前对数组进行洗牌，但我不知道该怎么做。

我的结果范围从未定义的变量，到视频播放一次没有任何反应，到视频随机播放但经常重复同一视频多次。

Answer 1

阅读代码库后，我发现了一些问题。希望这会帮助你理解。

应该在

playvids()

函数内部调用

shuffle()

函数，以便使用随机排列的数组来播放视频。

vids

playvids()

函数之外的数组，以便其他函数可以访问它。

getnextfile()

函数应该返回下一个要播放的视频文件，而不仅仅是下一个文件的索引。

var vids = ["vid1.mp4", "vid2.mp4", "vid3.mp4"];
var i = 0;

function shuffle(vids) {
  let currentIndex = vids.length,
    randomIndex;
  while (currentIndex != 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [vids[currentIndex], vids[randomIndex]] = [vids[randomIndex], vids[currentIndex]];
  }
  playvids();
}

function playvids() {
  shuffle(vids); // shuffle the array before playing the videos
  document.getElementById("myvideo").addEventListener('ended', getnextfile);
  document.getElementById("myvideo").src = "" + vids[i] + "";
}

function getnextfile() {
  if (i >= vids.length) {
    shuffle(vids); // reshuffle the array if all videos have been played
    i = 0; // reset the index to 0
  }
  var nextFile = vids[i];
  i++;
  return nextFile;
}

window.onload = playvids;

Answer 2

使用拉曼的一些答案，我想出了一个可行的解决方案。我还添加了一个鼠标悬停暂停，在视频上显示叠加文本。

下面的代码在页面加载时正确地启动随机播放列表，等到一个视频播放完后再播放下一个视频，然后在播放完最后一个视频后重新播放并重新开始。鼠标悬停时，视频暂停并变暗，并显示特定于该视频的文本叠加层。

笔记（我学到的一些东西）：

事件监听器在添加后必须移除，否则它们会开始多次触发。 Jquery 对此更好。

通过定义对象集然后将它们添加/推送到数组，可以将多个对象绑定到数组中的一个索引。

var bannervid = document.getElementById("myvideo");

function playVid() {
  bannervid.play();
} // introduce a function to play or pause the video

function pauseVid() {
  bannervid.pause();
}

var vids = []; //push the objects to the array so that you can include multiple objects per index, in this case the video url and a text description
vids.push({
  url: "vid1.mp4",
  credits: "some text for vid 1"
});
vids.push({
  url: "vid2.mp4",
  credits: "some text for vid 2"
});
vids.push({
  url: "vid3.mp4",
  credits: "some text for vid 3"
});
var i = 0; //set the index to 0

function shuffle(vids) {
  let currentIndex = vids.length,
    randomIndex;
  while (currentIndex != 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [vids[currentIndex], vids[randomIndex]] = [vids[randomIndex], vids[currentIndex]];
  }
  playvids(); //shuffle using Fisher-Yates algorithm then call the playvids function after the array has been shuffled
}

function playvids() {

  if (i >= vids.length) {
    i = 0;
    shuffle(vids);

  } //if the index has reached the end and the last video has played, reshuffle
  else { // otherwise, play the next video and increment the index by 1 
    var nextFile = vids[i].url;
    var nextCredits = vids[i].credits;
    $('#myvideo').bind('ended', function() {
      $('#myvideo').unbind('ended');
      playvids();
    }); //jquery code to correctly bind and then unbind the event listener so that it waits until the video has played to the end before playing the next video

    document.getElementById("myvideo").src = "" + nextFile + ""; //insert the current video's url into the video html element
    var creditspar = document.getElementById("bannercredits");
    creditspar.textContent = "" + nextCredits + ""; //insert the text description of the current video from the array into an html element, in this case a P element inside a div wrapping the video
    i++; //increment the index by 1 
  }
}


window.addEventListener("load", (event) => {
  shuffle(vids); //begin the entire sequence on page load
});

#bannercredits {
  text-align: end; //justify the video description text (optional)
}

.video_wrapper_text {
  position: absolute; //make the text overlay
  top: 15px; //your preference
  right: 62px; //your preference
  opacity: 0; //hide the text until mouse hover
  -webkit-transition: all 800ms ease; //fading effect for text
  transition: all 800ms ease;
}

.video_wrapper:hover .video_wrapper_text {
  opacity: 1; //fade in text
}

.bannervid {
  -webkit-transition: all 800ms ease; //fading effect for video brightness
  transition: all 800ms ease;
  ;
}

.video_wrapper:hover .bannervid {
  filter: brightness(0.3); //darken video on mouse hover
}

.video_wrapper {
  position: relative;
}

<div class="video_wrapper" onmouseover="pauseVid()" onmouseout="playVid()">
  //pause video on mouse hover, unpause when mouse leaves. wrapping the video in a div allows more css manipulation

  <video class="bannervid" id="myvideo" src="" muted autoplay></video> //make sure video autoplays, muted is optional

  <div class="video_wrapper_text">

    <p id="bannercredits"></p> //the video description will appear here

  </div>

</div>