带有HTML5视频的JQuery在动态创建的代码中检测到`play`事件但未检测到`ends`事件

Question

最近，我一直在尝试使用动态生成的HTML5代码，我想出了在HTML5视频代码上绑定ended事件的问题。

我在堆栈上找到了this解决方案，但它仅适用于play事件（仅限Chrome，但不适用于Firefox）。

有什么想法吗？

Answer 1

原因是，大多数HTML5事件都没有冒泡，jQuery依赖事件冒泡来进行事件委托，这很难过，但如果你想使用addEventListener，你可以实现它：

//note the third parameter has to be true, it is important to work document.addEventListener('ended', function(e){ if($(e.target).is('video')){ //e.target has ended playing } }, true);

作为替代方案，您可以使用webshim which implements many HTML5 features thorugh jQuery。

如果您为mediaelement请求填充，webshim会修复jQuery的媒体元素功能的事件委托代码：

```webshim.polyfill（＆＃39;的MediaElement＆＃39）;

$（文件）.on（＆＃39; play＆＃39;，＆＃39;结束＆＃39;，function（）{     //这已经结束了 }）;

Answer 2

我有这个解决方案适用于firefox，chrome和safari（IE未经测试）。

创建audio element：

var audio = document.createElement("audio");

为音频元素创建eventlistener：

audio.addEventListener('ended', function(){ alert('done'); });