在 Javascript 中判断视频是否已加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8685038/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tell whether video is loaded or not in Javascript
提问by Feng Huo
So, I've been using a listener on
所以，我一直在使用监听器
document.getElementById("video").buffered.length
to see if it's greater than 0for when a video's loaded or not. This works for a very small video, and only in Google Chrome. It doesn't work in Firefox at all. Any ideas for how to get this to work?
看看它是否比0加载视频时更大。这适用于非常小的视频，并且仅适用于 Google Chrome。它在 Firefox 中根本不起作用。有关如何使其工作的任何想法？
I essentially want to wait till 3 seperate videos are loaded to take a specific action, how do I go about this?
我基本上想等到加载了 3 个单独的视频以执行特定操作，我该怎么做？
回答by ?ime Vidas
Try this:
尝试这个：
var video = document.getElementById("video-id-name");
if ( video.readyState === 4 ) {
// it's loaded
}
Read here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState
在这里阅读：https: //developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState
回答by Badrush
UPDATE:
更新：
As others have mentioned, my original solution below does work but it can lead to performance issues and some unpredictability in its behaviour.
正如其他人所提到的，我下面的原始解决方案确实有效，但它可能会导致性能问题及其行为的一些不可预测性。
Therefore I recommend listening to the loadeddataevent.
Read more here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event
因此，我建议收听该loadeddata事件。在此处阅读更多信息：https: //developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event
const videoElement = document.getElementById("my_video");
videoElement.addEdventListener('loadeddata', (e) => {
//Video should now be loaded but we can add a second check
if(videoElement.readyState >= 3){
//your code goes here
}
});
==================================
==================================
INFERIOR SOLUTION:
劣质解决方案：
I find using setIntervalworks for actively listening to when the readyStateof the video changes by checking every half-second until it loads in.
我发现使用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);
}
If you're not using ES6 just replace () =>with function()
如果您不使用 ES6，只需替换() =>为function()
回答by efaj
To make this into a listener, under normal circumstances, you'll want to listen to the suspend event. It's triggered when download is paused or stopped for any reason, including it's finished.
为了使它成为一个监听器，在正常情况下，你需要监听 suspend 事件。当下载因任何原因暂停或停止时触发，包括下载完成。
You'll also want to listen to playing for the cases when the content is already loaded (like, from cache)
您还需要在内容已加载（例如，从缓存中）的情况下收听播放
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");
}
});
Source: https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events
来源：https: //developer.mozilla.org/en/docs/Web/Guide/Events/Media_events
回答by aye2m
var video = document.getElementById("video");
video.onloadeddata = function() {
// video is loaded
}
