接收來自多個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);
        });
    }
});

這里的工作示例。