Znajdź buforowany procent elementu wideo

Question

Potrzebuję znaleźć buforowany procent wideo z elementu <video>.

starałem się znaleźć to za pomocą poniższego kodu

videoElement.addEventListener("progress", bufferHandler); 
var bufferHandler = function(e) { 
    var buffered = e.target.buffered.end(0); 
    var duration = e.target.duration; 
    var buffered_percentage = (buffered/duration) * 100; 
    console.log(buffered_percentage); 
} 

Ale wartość nie jest prawidłowa, jeśli zagram kompletny film buffered_percentage nie wynikające w 100%.

var videoElement = document.getElementById("myVideo"); 
 
videoElement.addEventListener("progress", bufferHandler); 
 
var bufferHandler = function(e) { 
 
    var buffered = e.target.buffered.end(0); 
 
    var duration = e.target.duration; 
 
    var buffered_percentage = (buffered/duration) * 100; 
 
    console.log(buffered_percentage); 
 
}

<video id="myVideo" width="320" height="176" controls> 
 
    <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"> 
 
    <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg"> 
 
     Your browser does not support HTML5 video. 
 
</video>

Answer 1

Media Event: progress

Wysłane okresowo informować zainteresowane strony o postępie pobierania mediach. Informacja o aktualnej ilości materiałów, które zostały pobrane , jest dostępna w zbuforowanym atrybucie elementu nośnika .

Kod wysłane przez OP:

<script> 
var videoElement = document.getElementById("myVideo"); 
videoElement.addEventListener("progress", bufferHandler); 
var bufferHandler = function(e) 
{ 
    var buffered = e.target.buffered.end(0); 
    var duration = e.target.duration; 
    var buffered_percentage = (buffered/duration) * 100; 
    console.log(buffered_percentage); 
} 
    </script> 

konsoli wyjściowa:

Jeśli można proszę dodać script jak poniżej, byłoby wspaniale:

<script> 

var videoElement = document.getElementById("myVideo"); 
videoElement.addEventListener("progress", bufferHandler); 
function bufferHandler(e) 
{ 
if (videoElement && videoElement.buffered && videoElement.buffered.length > 0 && videoElement.buffered.end && videoElement.duration) 
{ 

    var buffered = e.target.buffered.end(0); 
    var duration = e.target.duration; 
    var buffered_percentage = (buffered/duration) * 100; 
    console.log(buffered_percentage); 
    } 
} 


    </script> 

Konsola wyjściowa: 51,699%

Wideo Buforowanie 100%:

Testowane na:

Uwaga: Użyłem innego filmu o pewnej długości i rozmiarze do testowania, niż zostało to zaksięgowane przez OP.

Dzięki

var videoElement = document.getElementById("myVideo"); 
 
videoElement.addEventListener("progress", bufferHandler); 
 
function bufferHandler(e) 
 
{ 
 
if (videoElement && videoElement.buffered && videoElement.buffered.length > 0 && videoElement.buffered.end && videoElement.duration) 
 
{ 
 
    
 
    var buffered = e.target.buffered.end(0); 
 
    var duration = e.target.duration; 
 
    var buffered_percentage = (buffered/duration) * 100; 
 
    console.log(buffered_percentage); 
 
    } 
 
}

<video id="myVideo" controls="controls"> 
 
    <source src="http://client.99nfomatics.in/test/files/B.mp4" type="video/mp4"> 
 
    
 
</video>