为 HTML5 个视频选择随机来源

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

你可以像这样使用随机函数所以代码将是

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

Answer 2

你可以试试这个:

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 3

你可以试试这个：它将从一组视频中的随机视频开始，然后按顺序播放直到数组结束，然后从头开始。

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>

为 HTML5 个视频选择随机来源

Choose random source for HTML5 video

html

javascript

html5-video