当视频更改而不重新加载页面时，HTML5 视频元素缺少 END 事件

Posted 2023-05-08

【中文标题】当视频更改而不重新加载页面时，HTML5 视频元素缺少 END 事件

【英文标题】：Missing END event for HTML5 Video element when video changes without page reload

【发布时间】：2016-11-17 13:39:34

【问题描述】：

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

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 等相关的信息。

在播放下一个视频之前，我想知道上一个视频已结束或暂停。有没有办法做到这一点。我也尝试听“emptied”事件。

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

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

【参考方案1】：

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

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

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

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