javascript - 从多个 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 中，就像在这个示例中一样，它应该可以工作。

大多数情况下，如果您确定您的脚本将在使用 a 创建视频元素后立即同步运行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);
        });
    }
});

这里的工作示例。