Question

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

我的所有搜索都会显示有关如何更改来源的说明，而不是检测来源是否已更改。

我希望我能做一些像

这样的事情

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

但我似乎无法找到是否存在实际事件。

谢谢！

Answer 1

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

示例（概念证明）

＆＃13;

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);
  }
};

＆＃13;

<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>

＆＃13;

Answer 2

您是否可以使用http://www.mediaelementjs.com/#api

中指定的“loadeddata”事件

检测HTML视频源更改事件（addEventListener）

2 个答案:

示例（概念证明）