如何防止视频阵列播放同一视频两次? [英] How to prevent a video array from playing the same video twice?
问题描述
我试图在不播放视频两次的情况下播放视频 1 到 3.我正在使用 videos.shift();
从数组中删除第一个视频,但我不确定如何在播放一次后删除其他 2 个视频.
I'm trying to play video1 to 3 without playing the video twice. I'm using videos.shift();
to remove the first video from the array, but I'm not sure how to remove the other 2 videos after they play once.
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
是需要按顺序播放的视频队列,除此之外别无他物.
If I understand this correctly, videos
is a queue of videos that need to be played in order, then nothing else.
我会将所有的队列管理规范化到 nextVideo()
函数中,这样你第一次玩就没有什么特别的了.因此:
I would normalize all the queue management into the nextVideo()
function, so that there was nothing special about the first time you play. Thus:
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()
在 nextVideo()
中:
Now, this doesn't, as in your initial example, play a random video - just the next in the queue. You can play a random video and remove it from the queue by using splice()
in nextVideo()
as such:
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)
}
当然,接下来您需要添加一个检查以确保您没有访问空数组...
Of course, next you'll want to add a check to make sure you're not accessing an empty array...
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)
}
这篇关于如何防止视频阵列播放同一视频两次?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!