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视频，我点击右侧栏列表中的任何其他视频或者如果亚马逊素数中的下一个视频。在这两种情况下，接收下一个视频的'PLAYING'事件以及与下一个视频curSRC，url等相关的信息。

就在播放下一个视频之前，我想知道之前的视频已被ENDED或SUSPENDED。有没有办法做到这一点。我也试着听''空'事件。

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

但是上面的代码总是不起作用。在检测到上一个视频的重置事件之前，观察下一个视频的firefox和Safari视频事件。此外，我还需要有关上一个视频当前时间，网址，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被触发后使用这些值。

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

JavaScript - 视频更改时没有重新加载页面的HTML5视频元素缺少END事件

1 个答案: