Trả lời xem video được tải hay không trong Javascript

Question

Vì vậy, tôi đã sử dụng một người biết lắng nghe trên

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

để xem nếu nó lớn hơn 0 khi một video được tải hay không. Tính năng này hoạt động cho một video rất nhỏ và chỉ trong Google Chrome. Nó không hoạt động trong Firefox. Bất kỳ ý tưởng nào về cách làm việc này?

Tôi về cơ bản muốn đợi cho đến khi 3 video riêng biệt được tải để thực hiện một hành động cụ thể, làm cách nào để tôi thực hiện việc này?

Answer 1

Hãy thử điều này:

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

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

đọc ở đây: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState

Answer 2

Để làm điều này thành một người biết lắng nghe, trong trường hợp bình thường, bạn sẽ muốn lắng nghe những sự kiện đình chỉ. Nó được kích hoạt khi tải xuống bị tạm dừng hoặc dừng vì bất kỳ lý do gì, kể cả quá trình tải xuống đã hoàn tất.

Bạn cũng sẽ muốn nghe chơi cho các trường hợp khi nội dung đã được nạp (như, từ bộ nhớ 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"); 
    } 
}); 

Nguồn: https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events

Answer 3

tôi thấy sử dụng setInterval làm việc cho chủ động lắng nghe để khi readyState trong những thay đổi video bằng cách kiểm tra mỗi nửa giây cho đến khi nó tải trong.

checkforVideo(); 

function checkforVideo() { 
    var b = setInterval(()=>{ 
     if(VideoElement.readyState >= 3){ 

      \\do whatever you want done here 

      \\you can now clearInterval (stop checking every half second) 
      clearInterval(b); 
     }     
    },500); 
} 

Nếu bạn không USI ng ES6 chỉ cần thay thế () => bằng function()