在Javascript中判断视频是否已加载

Question

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

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

我想要检查视频是否已加载并且其大小是否大于0，对于非常小的视频，这个方法可以使用，并且只在Google Chrome中有效。但它在Firefox中完全无效。有什么想法可以让这个方法在Firefox中也可行吗？

我需要等待3个不同的视频都加载完毕后才能执行特定的操作，应该如何实现？

- Riveascore

Answer 1

尝试这个：

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

- Šime Vidas

---

哪些浏览器支持该属性？ - Jared Farrish

根据这个维基，支持是完整的（WebKit列为空，但如果他们的实现落后于Mozilla/Opera，我会感到惊讶）。 - Šime Vidas

@ŠimeVidas 如果有多个视频，该如何使用？谢谢。 - user1642018

这个答案没什么意义。它并不能真正监听变化，只有在页面第一次加载时才会运行，如果能够立即准备好的话，它才能起作用。 - Omar

@Omar 没错。当有真正的解决方案发布时，我可以删除我的答案。 - Šime Vidas

@Omar，您正在概括使用情况。我之所以这么说，是因为在我的媒体预加载函数中，这个解决方案非常适合，因为我会定期轮询各种音频、视频、图像文件的加载情况。 - Dapu

Answer 2

更新：

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

因此，我建议监听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()

- Badrush

---

很棒的回答！FYI，这只是检查视频元素的一个简单属性。它使用非常少的处理能力，所以真的没有必要在检查之间等待半秒钟。您可以将其更改为10毫秒，并几乎在加载视频的确切时刻捕获视频。 - Gavin

这太牛了。 - John the Painter

这个回答非常好，但它会阻塞主线程，我正在尝试在那里显示一个旋转器... 旋转器动画每秒钟都会冻结。 - Duck

@DuckDucking 你说得对。使用 setInterval 可能会完成任务，但远非理想。我更新了我的答案，提供了一种新的、改进的解决方案，不应该引起性能问题。 - Badrush

现在是2023年，对我来说，“较差”的解决方案是唯一在Firefox上有效的。即使在MDN上列出它在所有浏览器中都能工作，但loadeddata什么都没做。 - undefined

Answer 3

要将其转换为监听器，在正常情况下，您需要侦听挂起事件。当下载因任何原因暂停或停止，包括已完成时触发该事件。

您还需要在内容已经加载的情况下（例如从缓存中加载）侦听playing事件。

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

这是一个关于媒体事件的指南，涵盖了在HTML5中使用的各种事件。这些事件包括：播放、暂停、结束、音量变化等等。通过使用这些事件，您可以为用户提供更好的媒体体验，并控制媒体文件的行为。

- efaj

Answer 4

使用视频元素上的onloadeddata事件。它会检查视频是否已加载。有关更多信息，请参见此参考资料。

当媒体在当前播放位置上的帧完成加载时（通常是第一帧），将触发loadeddata事件。

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

- aye2m

---

虽然这段代码可能回答了问题，但提供有关它如何以及/或为什么解决问题的附加上下文将改善答案的长期价值。 - Ethan

很快我就找到了这个提示的研究方法，在我的情况下，它证明是最好的解决方案。在 <video onloadded="mystuff()"...> 中，我设置了暂停、等待和恢复，以解决由于直播流缓冲不足而导致的视频卡顿问题。 - Leo Smith

Answer 5

我找到了其他的方法

    const video = document.querySelector('video');

video.addEventListener('canplaythrough', (event) => {
  console.log('I think I can play through the entire ' +
      'video without ever having to stop to buffer.');
});

来源 - https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/canplaythrough_event

- samicsc0