如何使用 vid.onended 来检测视频何时使用 javascript 播放完毕

Question

我正在尝试创建一个 HTML 视频播放列表，目前我正在使用 vid.onended 检测视频何时播放完毕（基于当前视频源），然后播放下一个视频当视频结束时。这对于第一个视频非常有效，但由于某种原因它从不播放第二个视频并直接跳到第三个视频。

我的代码：

//add video playlist functionality to auto play next video based on id
var vid = document.getElementById("urlVideo");
vid.onended = function() {
  var video0 = "http://techslides.com/demos/sample-videos/small.mp4";
  var video1 = "https://media.w3.org/2010/05/sintel/trailer.mp4";
  var video2 = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
  if (vid.src = video0) {
    vid.src = video1;
  }
  if (vid.src = video1) {
    vid.src = video2;
  }
};

<video id="urlVideo" width="100%" height="460" controls autoplay>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

我做错了什么？

编辑：

Alen Toma 的回答非常完美。

我还根据 Quentin 的评论根据当前视频源设法做到了，对于寻找如何使用当前视频源明确地做到这一点的其他人作为 variable/condition，请参阅 https://jsfiddle.net/redlaw/qjb5h7e9/9/

Answer 1

您必须为您的视频播放器使用事件侦听器，如以下代码：

var vid = document.getElementById("urlVideo");
vid.addEventListener("ended", function() { /* your code*/ }, true);

Answer 2

我在下面做了一个小例子，应该会有帮助。

看看这个JSFiddle。

//add video playlist functionality to auto play next video based on id
var videoSrc = [
  "https://media.w3.org/2010/05/sintel/trailer.mp4",
  "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
]
var vid = document.getElementById("urlVideo");
var index = 0;
vid.addEventListener("ended", function() {
  var currentSrc = videoSrc[index];
  index += 1;
  if (index >= videoSrc.length)
    index = 0; // Make Loop and jump to the first video
  vid.src = currentSrc;
  vid.play();
  console.log(currentSrc)
}, true);

<video id="urlVideo" controls autoplay>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>

如何使用 vid.onended 来检测视频何时使用 javascript 播放完毕

How to use vid.onended to detect when a video is done playing using javascript

javascript

html5-video