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

【问题标题】：Accessing HTML 5 Video Progress Event with jQuery使用 jQuery 访问 HTML 5 视频进度事件
【发布时间】：2010-06-08 03:59:19
【问题描述】：

以下是 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 );

            });

提前致谢，

【问题讨论】：

标签： javascript jquery html html5-video

【解决方案1】：

为什么不直接使用：

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

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

看这里

HTML5 <video> callbacks?

【讨论】：

感谢您的回复。使用上面的代码时，我在控制台中收到错误“$(vid).addEventListener is not a function”。
仍然不行，你发布的链接我今天早些时候检查过，“结束”和“持续时间变化”事件没有问题。不幸的是，“进步”没有。
您使用的是什么浏览器，您确定您使用作为 HTML 命名空间吗？

【解决方案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

问候亚历克斯

【讨论】：

【解决方案3】：

使用原始事件：

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

【讨论】：

【解决方案4】：

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

你有：

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

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

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

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

【讨论】：