12

下面是一个 HTML5 视频播放器事件。

我和我的搭档在这一天的大部分时间里都被这个问题难住了，希望有人能就这个问题提供一些见解。我们已经能够使用纯 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 );

            });

提前致谢，

JN

4

4 回答 4

5

为什么不直接使用：

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

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

看看这里

HTML5 <video> 回调？

于 2010-06-08T04:12:01.317 回答
2

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

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

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

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

问候亚历克斯

于 2010-06-22T21:11:39.840 回答
1

使用原始事件：

if(e.originalEvent.lengthComputable && e.originalEvent.total){
     var loaded = e.originalEvent.loaded / e.originalEvent.total * 100;
}
于 2010-08-25T16:32:48.427 回答
0

一些疯狂的猜测......

你有：

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

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

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

var vid = $('#test-vid');
vid.get().addEventListener(...
于 2010-06-08T04:25:50.737 回答