所以，我一直在使用监听器
document.getElementById("video").buffered.length
查看视频加载时间是否大于0。这适用于非常小的视频，并且仅适用于 Google Chrome。它在 Firefox 中根本不起作用。关于如何让它发挥作用的任何想法？
我基本上想等到 3 个单独的视频加载完毕后再执行特定操作，我该怎么做？
【问题讨论】：
标签： javascript html video loaded
试试这个：
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
【讨论】：
更新：
正如其他人所提到的，我下面的原始解决方案确实有效，但它可能会导致性能问题和一些不可预测的行为。
因此我建议收听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()
【讨论】：
setInterval 可能会完成工作，但远非理想。我使用不会导致性能问题的新改进解决方案更新了我的答案。
为了使它成为一个监听器，在正常情况下，你需要监听挂起事件。当下载因任何原因（包括下载完成）暂停或停止时触发。
您还需要在内容已经加载（例如，从缓存中）的情况下收听播放
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
【讨论】：
在视频元素上使用 onloadeddata 事件。它检查视频是否已加载。请参阅this reference 了解更多信息。
当媒体当前播放位置的帧完成加载时触发loadeddata事件；通常是第一帧。
var video = document.getElementById("video");
video.onloadeddata = function() {
// video is loaded
}
【讨论】：