从多个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中，就像在this example上一样，它应该可以正常工作。

大多数情况下，如果您确定在使用src创建视频元素后，您的脚本将同步运行，您可以假设这些事件都没有被触发。但是，为了安全起见，特别是当您不知道如何使用代码时，我推荐这样的内容：

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);
        });
    }
});

工作示例here。