web-dev-qa-db-ja.com

ビデオがJavascriptでロードされているかどうかを確認する

だから、私は上のリスナーを使用しています

document.getElementById("video").buffered.length

動画が読み込まれたかどうかの0より大きいかどうかを確認します。これは非常に小さなビデオで機能し、Google Chromeでのみ機能します。 Firefoxではまったく機能しません。これを機能させる方法についてのアイデアはありますか？

基本的に、3つの個別のビデオがロードされて特定のアクションを実行するまで待機したいのですが、どうすればよいですか？

javascripthtml5videoloaded
27
Feng Huo

これを試して：

var video = document.getElementById("video-id-name");

if ( video.readyState === 4 ) {
    // it's loaded
}

ここを読んでください： https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState

38
Šime Vidas

setIntervalを使用すると、ビデオのreadyStateが変化するとき、ロードするまで0.5秒ごとにチェックすることでアクティブにリッスンすることができます。

_checkforVideo();

function checkforVideo() {
    //Every 500ms, check if the video element has loaded
    var b = setInterval(()=>{
        if(VideoElement.readyState >= 3){
            //This block of code is triggered when the video is loaded

            //your code goes here

            //stop checking every half second
            clearInterval(b);

        }                   
    },500);
}
_

ES6を使用していない場合は、_() =>_をfunction()に置き換えるだけです

10
Badrush

これをリスナーにするために、通常の状況では、サスペンドイベントをリッスンする必要があります。ダウンロードが完了したなど、何らかの理由でダウンロードが一時停止または停止したときにトリガーされます。

また、コンテンツが既にロードされている場合（キャッシュからなど）の再生を聞くこともできます。

video.addEventListener("playing", function() {
    console.log("[Playing] loading of video");
    if ( video.readyState == 4 ) {
        console.log("[Finished] loading of video");
    }
});
video.addEventListener("suspend", function(e) {
    console.log("[Suspended] loading of video");
    if ( video.readyState == 4 ) {
        console.log("[Finished] loading of video");
    }
});

ソース： https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events

4
efaj
var video = document.getElementById("video");
video.onloadeddata = function() {
    // video is loaded
}
1
aye2m