Найти буферизованный процент видеоэлемента

Question

Мне нужно найти буферный процент видео от <video> элемент.

Я пытался найти это, используя приведенный ниже код,

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); 
} 

Но значение не является правильным, если я играю полное видео buffered_percentage не в результате на 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

Направлено периодически информировать заинтересованные стороны о ходе скачивания СМИ. Информация о текущем количестве носителя, загруженного , доступна в атрибуте медиа-элемента.

код отправленный 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> 

Выход консоли:

Если вы можете, пожалуйста, добавить script, как показано ниже, это было бы здорово:

<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> 

Выход консоли: 51,699%

Видео Буферизация 100%:

Проверено на:

Примечание. Использовали другое видео с некоторой длиной и размером для тестирования, а не с помощью OP.

Благодаря

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>