如何防止视频阵列播放相同的视频两次？答案

【问题标题】：How to prevent a video array from playing the same video twice?如何防止视频阵列播放相同的视频两次？
【发布时间】：2021-04-15 03:06:58
【问题描述】：

我正在尝试播放 video1 到 3 而不播放视频两次。我正在使用 videos.shift(); 从数组中删除第一个视频，但我不确定在播放一次后如何删除其他 2 个视频。

    var videos = ["video1", "video2", "video3"];
    videos.shift();
    var player1 = document.getElementById("video");
    function setMp4Source1() {
        var currentVideoIndex = Math.floor(Math.random() * videos.length);
        var currentVideo = "videos/" + videos[currentVideoIndex] + ".mp4";
        player1.src = currentVideo;
        player1.load();
        player1.play();
    }
    player1.addEventListener('ended', nextVideo, false);
    function nextVideo() {
        setMp4Source1();
    }

【问题讨论】：

标签： javascript arrays video

【解决方案1】：

如果我理解正确的话，videos 是一个需要按顺序播放的视频队列，没有别的了。

我会将所有队列管理规范化到nextVideo() 函数中，这样你第一次玩就没有什么特别的了。因此：

var videos = ["video1", "video2", "video3"]

var player1 = document.getElementById("video")
function setMp4Source1(theVideo) {
    var currentVideo = "videos/" + theVideo + ".mp4"
    player1.src = currentVideo
    player1.load()
    player1.play()
}
player1.addEventListener('ended', nextVideo, false)

function nextVideo() {
    let theVideo = videos.unshift()
    setMp4Source1(theVideo)
}
nextVideo() // start the chain here!

现在，这不像您最初的示例那样播放随机视频 - 只是队列中的下一个视频。您可以通过在nextVideo() 中使用splice() 来播放随机视频并将其从队列中删除：

function nextVideo() {
    let randomIndex = Math.floor(Math.random() * videos.length)
    let theVideo = videos[randomIndex]
    videos.splice(randomIndex,1) // remove 1 element starting at the index
    setMp4Source1(theVideo)
}

当然，接下来您需要添加一个检查以确保您没有访问空数组...

function nextVideo() {
    if( videos.length < 1) {
       // no moar videos! :(
       // probably best to bail out here and avoid further chaining.
       // if you're clever, you'll add a placeholder image to let 
       // the user know there's no more videos.
       // maybe something from http://placekitten.com/
       player1.removeEventListener('ended', nextVideo, false)
       
       sizer_x = player1.clientWidth
       sizer_y = player1.clientHeight
       const kitty = '<img src="http://placekitten.com/' + sizer_x + '/' + sizer_y + '"/>'
       const kittyImg = document.createElement(kitty)
       player1.parentNode.replaceChild(kittyImg, player1)

       return
    }
    let randomIndex = Math.floor(Math.random() * videos.length)
    let theVideo = videos[randomIndex]
    videos.splice(randomIndex,1) // remove 1 element starting at the index
    setMp4Source1(theVideo)
}

【讨论】：

原始代码中有几个错误。我正在讨论为您修复它们还是让您自己找出答案。只要确保您完全了解 Math.random() 的作用以及 videos.length 的返回值。
此代码未经测试，提供 100% 退款保证。

【解决方案2】：

跟踪使用Set 对象播放的索引号。 Set 对象类似于数组，但只包含唯一项。详细信息在以下代码段中进行了注释。

const videos = [
  "vs8s3.mp4", "vs12s3.mp4", "vs21s3.mp4", "vs2s3.mp4"
];
const player = document.querySelector("video");
// Create a Set object
const played = new Set();

function playVideo() {
  let current = Math.floor(Math.random() * videos.length);
  const base = 'https://glpjt.s3.amazonaws.com/so/av/';
  const source = base + videos[current];
  
  /* Check if video has already been played */
  // If Set {played} DOES NOT have the {current} index number...
  if (!played.has(current)) {
    // Add {current} index number to Set {played}
    played.add(current);
    player.src = source;
    player.play();
  } 
    /* or if Set {played} does have {current} index number AND Set {played} 
    DOES NOT have the same amount of numbers as Array {videos}... */
    else if (played.size != videos.length) {
    // Run the function again
    playVideo();
  } 
  // Otherwise end function
  else {
    return false;
  }
  /* OPTIONAL: Display the indexes of each video played in order */
  console.clear();
  console.log(JSON.stringify(Array.from(played)));
};

player.addEventListener('ended', playVideo, false);
player.addEventListener('click', playVideo, false);

video {
  cursor: pointer;
}

&lt;video poster='http://simgbb.com/background/W46xw0TswdDx.jpg' width='360'&gt;&lt;/video&gt;

【讨论】：