使用jQuery访问HTML 5video进度事件

以下是HTML5video播放器活动。

在这个问题上，我和我的伙伴在一天的很大一部分时间里都很难过，希望有人能够对这个问题提供一些见解。 我们已经能够使用普通的js访问progress事件，如下所示，但是当尝试使用jQuery访问它时，我们在控制台中得到了未定义。 非常感谢任何帮助/建议。

//JS - Works like a charm document.addEventListener("DOMContentLoaded", init, false); function init() { var v = document.getElementById('test-vid'); console.log(v) v.addEventListener('progress', progress, false); } function progress(e) { console.log(e.lengthComputable + ' ' + e.total + ' ' + e.loaded); } // jQuery - NO BUENO - Undefined rendered in console var vid = $('#test-vid'); $(vid).bind("progress", function(e){ console.log(e.total + ' ' + e.loaded + ' ' + e.lengthComputable ); }); 

提前致谢，

JN

Answer 1

为什么不使用：

  $('video#test-vid').bind("progress",function(e){ console.log(e.total + ' ' + e.loaded + ' ' + e.lengthComputable ); }); 

这应该工作，jQuery应该绑定事件

看看这里

HTML5

Answer 2

你得到一个未定义因为jQuery使用事件属性的白名单来规范化事件，这个列表中既没有加载也没有加载。

如果要获取信息，则必须使用：e.originalEvent.lengthComputable等。

但说实话，你不应该这样做。 此事件属性仅为firefox，不再是html5规范的一部分。 您必须在其他浏览器中使用缓冲对象。 在html5媒体元素中，进步的东西确实存在问题。 iPad上的safari与mac上的safari不同，等等。

可以在jMediaelement-libary中找到progress-event的跨浏览器实现： http ：//github.com/aFarkas/jMediaelement/blob/1.1.3/src/mm.base-api.js#L312

问亚历克斯

Answer 3

使用originalEvent：

 if(e.originalEvent.lengthComputable && e.originalEvent.total){ var loaded = e.originalEvent.loaded / e.originalEvent.total * 100; } 

Answer 4

一些疯狂的猜测……

你有：

 var vid = $('#test-vid'); $(vid).bind(... 

在第二行，vid已经是一个jQuery对象。 你尝试过简单地使用vid.bind()吗？

或者，如果您知道addEventListener有效，为什么不使用它呢？ 如果在使用jQuery选择后发出未修饰的DOM对象，也许你会幸运的：

 var vid = $('#test-vid'); vid.get().addEventListener(...