Tìm phần trăm bộ đệm của phần tử video

Question

Tôi cần phải tìm phần trăm đệm của video từ yếu tố <video>.

Tôi đã cố gắng để tìm thấy điều này bằng cách sử dụng mã dưới đây,

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

Nhưng giá trị là không đúng, Nếu tôi chơi hoàn chỉnh video buffered_percentage không kết quả 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

Sent định kỳ để thông báo cho các bên liên quan về tiến độ tải giới truyền thông. Thông tin về số lượng hiện tại của phương tiện có được tải xuống có sẵn trong thuộc tính đệm của phần tử đa phương tiện.

Mã đăng bởi 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> 

Output Console:

Nếu bạn vui lòng thêm script như dưới đây, nó sẽ là tuyệt vời:

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

Output Console: 51,699%

video Buffering 100%:

Tested on:

Lưu ý: Đã sử dụng một video khác có thời lượng và kích thước để thử nghiệm thay vì được đăng bởi OP.

Cảm ơn

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>