javascript - 视频更改而无需重新加载页面时，HTML5视频元素缺少END事件

Question

我正在使用以下代码来分离视频事件:

var HTML5VideoEvents = ["playing","pause","ended","seeked"];
var videos = win.document.getElementsByTagName("video");
for (var i = 0; i < videos.length; i++){
  for (var j = 0; j < HTML5VideoEvents.length; j++){
    videos[i].addEventListener(HTML5Events[j], videoEvenDetected, false);
  }
}

该代码在正常情况下可以正常工作，并且我可以获取所有事件，但是当播放不同的视频而无需重新加载页面时，例如如果我正在观看一个Youtube视频，并且单击右侧栏列表中的任何其他视频，或者单击Amazon Prime中的另一个视频。在这两种情况下，接收下一个视频的“播放”事件以及与下一个视频的curSRC，URL等有关的信息。
在这里，在播放下一个视频之前，我想知道上一个视频已结束或已暂停。有没有办法做到这一点。我也尝试收听“清空”事件。

videos[i].addEventListener("emptied", detectVideoReset, false);

但是上面的代码并不总是有效。在Firefox和Safari上，在检测到上一个视频的重置事件之前，先观察下一个视频的事件。另外，我还需要有关上一个视频当前时间，URL，curSRC，下一个视频开始之前的持续时间的信息。

Answer 1

我建议您看看媒体元素的加载算法，该算法指定了触发媒体事件的顺序。正如您所指出的，emptied事件在重置currentTime和其他变量之后触发...。这是有道理的，但是对于您的用例来说是不幸的。

https://www.w3.org/TR/2011/WD-html5-20110113/video.html#media-element-load-algorithm

您可以只记录ended事件吗？如果事件已被触发，则将视频标记为ENDED。否则，假设它已被挂起。您还可以在每次视频暂停时记录currentTime和src-然后在触发emptied后使用这些值。

我很想知道您是否找到更优雅的解决方案...