选择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代码中的视频？我希望代码在第一次执行时随机选择列表中的一个。在选择了一个随机起点之后，它应该按照正常顺序遍历列表。它不应该使每个视频都是随机的，只有起点是随机的。

- Jascha Goltermann

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>

- Mohamed Sadat

---

当我运行你的代码片段时，我只看到一个错误消息："message": "Uncaught TypeError: Cannot read property 'addEventListener' of null"。 - Jascha Goltermann

我已经编辑过了，错误是正常的，因为我没有添加你的HTML代码 :) 我还添加了一个函数，在窗口加载后随机选择初始视频 :) - Mohamed Sadat

Answer 2

You can try this: It will start on a random video of an array of videos, and it will be reproducing sequentially till end of array and start from beginning again.

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>

- Alejandro C

---

也许我应该解释得更清楚：我不想让它以随机的顺序遍历列表。视频列表中的顺序应保持不变。它只能随机选择从哪个视频开始播放。比如，它会随机从第7个视频开始播放，然后接着播放第8个、第9个等等。 - Jascha Goltermann

@JaschaGoltermann 是的，在这个例子中，它只是从视频的随机位置开始播放，当它完成后，它将转到数组的下一个位置。(例如：如果您有5个视频，它将从像3这样的随机位置开始，并按顺序重现3、4、5、1、2...) - Alejandro C

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

- Mohammad Shrateh

---

也许我应该更好地解释一下：我不希望它以随机顺序遍历列表。视频列表中的视频顺序应保持不变。它只应随机选择从哪个视频开始播放。比如，它会随机从第7个视频开始播放，然后依次播放第8个、第9个视频等。 - Jascha Goltermann

简单来说，您可以复制并将我的函数附加到您的代码末尾，这将导致运行代码并拥有随机起始视频。 - Mohammad Shrateh