Question

我正在运行以下代码，该代码会在原始来源结束后立即更改html5视频的来源。第一个视频播放完后，它将运行第二个，然后运行第三个，最后从头开始再次播放，从而导致无休止的循环。

var myvid = document.getElementById('myvideo');
var myvids = [
  "http://www.w3schools.com/html/mov_bbb.mp4", 
  "http://www.w3schools.com/html/movie.mp4"
  ];
var activeVideo = 0;

myvid.addEventListener('ended', function(e) {
  // update the active video index
  activeVideo = (++activeVideo) % myvids.length;

  // update the video source and play
  myvid.src = myvids[activeVideo];
  myvid.play();
});

<video src="http://www.w3schools.com/html/mov_bbb.mp4" id="myvideo" width="320" height="240" autoplay muted playsinline style="background:black">
</video>

现在我的问题是：如何将javascript代码中的哪个视频排在首位？每当代码第一次执行时，我希望它从列表中随机选择一个。选择一个随机的起点后，它应该以正常顺序浏览列表。它不应该让每个视频都是随机的，而应该只是起点。

Answer 1

您可以尝试以下方法：

function getRandomIndex(max) {
  /* The function will return a random number between 0 and max - 1 */
  return Math.floor(Math.random() * Math.floor(max));
}

function randomlyChooseVideo() {
  activeVideo = getRandomIndex(myvids.length);

  // update the video source and play
  myvid.src = myvids[activeVideo];
  myvid.play();
}

var myvid = document.getElementById('myvideo');
var myvids = [
  "http://www.w3schools.com/html/mov_bbb.mp4", 
  "http://www.w3schools.com/html/movie.mp4"
  ];
/* The initial active video will radomly be choosen between 0 and videoArray length - 1 */
var activeVideo = getRandomIndex(myvids.length);

window.onload = function(e) {
  randomlyChooseVideo()
}

myvid.addEventListener('ended', function(e) {
  randomlyChooseVideo()
});

<video src="" id="myvideo" width="320" height="240" autoplay muted playsinline style="background:black">
</video>

Answer 2

您可以尝试以下操作：它将从视频数组中的随机视频开始，并且将依次重播直到数组结尾并从头开始。

var vidElement = document.getElementById('myvideo');
var vidSources = [
  "http://www.w3schools.com/html/mov_bbb.mp4", 
  "http://www.w3schools.com/html/movie.mp4"
  ];
var activeVideo = Math.floor((Math.random() * vidSources.length));
vidElement.src = vidSources[activeVideo];
vidElement.addEventListener('ended', function(e) {
  // update the active video index
  activeVideo = (++activeVideo) % vidSources.length;
  if(activeVideo === vidSources.length){
    activeVideo = 0;
  }

  // update the video source and play
  vidElement.src = vidSources[activeVideo];
  vidElement.play();
});

<video src="http://www.w3schools.com/html/mov_bbb.mp4" id="myvideo" width="320" height="240" autoplay muted playsinline style="background:black">
</video>

Answer 3

您可以像这样使用随机函数因此代码将是

var myvid = document.getElementById('myvideo');
var myvids = [
  "http://www.w3schools.com/html/mov_bbb.mp4", 
  "http://www.w3schools.com/html/movie.mp4"
  ];
var activeVideo = 0;

myvid.addEventListener('ended', function(e) {
  // update the active video index
  activeVideo = (Math.floor[Math.random()*myvids.length]) % myvids.length;

  // update the video source and play
  myvid.src = myvids[activeVideo];
  myvid.play();
});

选择HTML5视频的随机来源

3 个答案: