检测 HTML 视频源更改事件 (addEventListener)

Question

我正在尝试查找 HTML 视频更改其来源时的事件。我使用 mediaelement.js 作为我的皮肤，但我找不到任何额外的事件。

我的所有搜索都只是找到有关如何更改源的说明，而不是检测源是否已更改。

我希望我能做类似

的事情

.addEventListener('sourceChange', function (e) { })

但我似乎找不到是否有实际事件。

谢谢！

Answer 1

您能不能使用此处指定的 "loadeddata" 事件 http://www.mediaelementjs.com/#api

Answer 2

您可以使用 loadedmetadata、loadeddata 以及 canplay 事件来确定源是否已加载并可以播放。该事件包含对相关源视频元素的引用，您可以从那里检查 url 与前一个相比是否发生了变化。

示例（概念验证）

var cUrl = v.src;     // current url

v.onloadedmetadata = function() {
  if (this.src !== cUrl) {
    i.innerHTML = "<b>Source changed!</b>";
    cUrl = this.src;  // update, etc..
  }
  else {
    i.innerHTML = "Source is playing... (changes source in 5 sec.)";
    setTimeout(function() {
      i.innerHTML = "Loading new source...";
      v.src = "http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_30mb.mp4";
    }, 5000);
  }
};

<div id=i>Loading video, please wait...</div><br>
<video id=v autoplay muted controls
  src="http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_50mb.mp4"></video>

检测 HTML 视频源更改事件 (addEventListener)

Detect HTML Video Source Change Event (addEventListener)

html

html5-video

示例（概念验证）