37

所以，我一直在使用监听器

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

查看它是否大于0视频加载时间。这适用于非常小的视频，并且仅适用于 Google Chrome。它在 Firefox 中根本不起作用。关于如何让它发挥作用的任何想法？

我基本上想等到 3 个单独的视频被加载后才能采取特定的行动，我该怎么做？

4

4 回答 4

54

试试这个：

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

于 2011-12-30T23:37:34.443 回答
18

更新：

正如其他人所提到的，我下面的原始解决方案确实有效，但它可能会导致性能问题和一些不可预测的行为。

因此，我建议收听该loadeddata事件。在此处阅读更多信息：https ://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event

const videoElement = document.getElementById("my_video");

videoElement.addEventListener('loadeddata', (e) => {
   //Video should now be loaded but we can add a second check

   if(videoElement.readyState >= 3){
       //your code goes here
   }

});

====================================

劣质解决方案：

我发现使用作品可以通过每半秒检查一次视频的变化setInterval来主动收听视频的变化，直到它加载。readyState

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()

于 2017-12-11T02:43:23.683 回答
6

为了使它成为一个监听器，在正常情况下，您需要监听挂起事件。当下载因任何原因暂停或停止时触发，包括下载完成。

您还需要在内容已经加载（例如，从缓存中）的情况下收听播放

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

于 2017-07-04T23:40:56.277 回答
2

在视频元素上使用 onloadeddata 事件。它检查视频是否已加载。有关详细信息，请参阅此参考。

当媒体当前播放位置的帧完成加载时，会触发loadeddata事件；通常是第一帧。

var video = document.getElementById("video");
video.onloadeddata = function() {
    // video is loaded
}
于 2018-05-24T07:09:29.477 回答