0

複数のビデオがあり、それらすべてからイベントを取得したいと考えています。しかし、私はそのうちの1つからのイベントしか取得しません(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'));
});

jsフィドル

編集：

わかりました..それは本当に奇妙です。最初のロードで、両方のイベントが発生することがあります。しかし、その後、リロードするたびに、そのうちの1つからイベントが発生します!? ここに私のコンソールのスクリーンショットがあります:

ここに画像の説明を入力

4

1 に答える 1

1

問題は、「canplay」イベントが登録時にすでに発生していることです。これは、jsFiddle がコードを .xml 内にラップするためだと思います$(window).load(...。この例のように、スクリプトを html に移動する場合は、動作するはずです。

ほとんどの場合、ビデオ要素が で作成された直後にスクリプトが同期的に実行されることが確実にわかっている場合は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);
        });
    }
});

ここでの作業例。

于 2013-10-19T21:03:35.427 に答える