Question

以下内容适用于HTML5视频播放器事件。

在这个问题上，我和我的伙伴在一天的很大一部分时间里都很难过，希望有人能够对这个问题提供一些见解。我们已经能够使用普通的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 <video> callbacks?

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

使用jQuery访问HTML 5视频进度事件

4 个答案: