如何防止视频阵列播放同一视频两次？

我正在尝试播放视频 1 到 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();
    }

如果我理解正确的话，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!

现在，这并不像您最初的示例那样播放随机视频 - 只是播放队列中的下一个视频。您可以播放随机视频并将其从队列中删除，方法是使用splice() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice in nextVideo()像这样：

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