接收来自多个HTML5视频的事件

Question

我有多个视频，希望从所有视频中获得一个活动。 但是我只能从其中一个获得事件（在Chrome中测试）。 为什么？

HTML：

<video id="video1" preload="auto" src="video1.ogg"></video>
<video id="video2" preload="auto" src="video2.ogg"></video>

JS：

$('video').on('canplay', function(){
    console.log($(this).attr('id'));
});

jsFiddle

编辑：

好吧..真的很奇怪。 在第一次加载时，有时会遇到两个事件。 但是在每次重新加载之后，我都会从其中一个事件中得到一个事件！ 这是我的控制台的屏幕截图：

Answer 1

问题在于，在您注册时“ canplay”事件已经触发。 我相信这是因为jsFiddle将您的代码包装在$(window).load(... ，如果要将脚本移动到html中，例如在此示例中 ，它应该可以工作。

在大多数情况下，如果您确定在使用src创建video元素后脚本将立即同步运行，则可以假定没有触发任何事件。 但是，为了安全起见，尤其是当您不知道如何使用代码时，我建议使用类似以下内容的代码：

function handleCanplay(video) {
    console.log($(video).attr('id'));
};

$('video').each(function () {
    //first, check if we missed the 'canplay' event
    if (this.readyState >= this.HAVE_FUTURE_DATA) {
        //yup, we missed it, so run this immediately.
        handleCanplay(this);
    } else {
        //no, we didn't miss it, so listen for it
        $(this).on('canplay', function () {
            handleCanplay(this);
        });
    }
});

这里的工作示例。