Javascript 使用 jQuery 访问 HTML 5 视频进度事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2994680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Accessing HTML 5 Video Progress Event with jQuery
提问by jeffreynolte
The below is for an HTML5 video player event.
下面是一个 HTML5 视频播放器事件。
My partner and I have been stumped for a very large portion of the day on this issue and hope someone can lend some insight on the issue. We have been able to access the progress event with plain js as seen below but when trying to access this with jQuery we get undefined in console. Any help/ recommendations are greatly appreciated.
我和我的搭档一天中的大部分时间都被这个问题难住了，希望有人能就这个问题提供一些见解。我们已经能够使用普通 js 访问进度事件，如下所示，但是当尝试使用 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 );
});
Thanks in advance,
提前致谢，
JN
JN
采纳答案by RobertPitt
Why not just use:
为什么不使用：
$('video#test-vid').bind("progress",function(e){
console.log(e.total + ' ' + e.loaded + ' ' + e.lengthComputable );
});
This should work, jQuery should bind the events
这应该有效，jQuery 应该绑定事件
Take a look here
看看这里
回答by alexander farkas
you get an undefined because jQuery uses a whitelist of event-properties, to normalize events, neither loaded nor total is in this list.
你得到一个 undefined 因为 jQuery 使用一个事件属性的白名单来规范化事件，这个列表中既没有加载也没有总数。
If you want to get the information, you have to use: e.originalEvent.lengthComputable etc..
如果要获取信息，必须使用：e.originalEvent.lengthComputable 等。
But honestly you shouldn't do this. This event properties are firefox only and aren't part of the html5 spec anymore. You have to use the buffered object in other browsers. The progress-thing is really problematic in html5 mediaelements. safari on iPad works different from safari on mac and so on.
但老实说，你不应该这样做。此事件属性仅适用于 Firefox，不再是 html5 规范的一部分。您必须在其他浏览器中使用缓冲对象。在 html5 mediaelements 中，进度确实有问题。iPad 上的 safari 与 Mac 上的 safari 等不同。
a cross-browser implementation of a progress-event can be found in the jMediaelement-libary: http://github.com/aFarkas/jMediaelement/blob/1.1.3/src/mm.base-api.js#L312
可以在 jMediaelement-libary 中找到进度事件的跨浏览器实现：http://github.com/aFarkas/jMediaelement/blob/1.1.3/src/mm.base-api.js#L312
regards alex
问候亚历克斯
回答by Tom
Use the originalEvent:
使用原始事件：
if(e.originalEvent.lengthComputable && e.originalEvent.total){
var loaded = e.originalEvent.loaded / e.originalEvent.total * 100;
}
回答by Ken Redler
A few wild guesses...
一些疯狂的猜测......
You have:
你有：
var vid = $('#test-vid');
$(vid).bind(...
On that second line, vid is already a jQuery object. Have you tried simply using vid.bind()?
在第二行， vid 已经是一个 jQuery 对象。你试过简单地使用vid.bind()吗？
Alternatively, if you know addEventListenerworks, why not use it? Maybe you'll have luck if, after selecting with jQuery, you emit the undecorated DOM object:
或者，如果您知道addEventListener有效，为什么不使用它？如果在使用 jQuery 选择之后，您发出未修饰的 DOM 对象，也许您会很幸运：
var vid = $('#test-vid');
vid.get().addEventListener(...
