Question

I'm attempting to create a simple loading bar for a video element. I've followed as much of the information I can find on this issue but continue to have trouble displaying the loaded percentage in the progress bar.

CodePen Example

HTML

<video id="preview-vid" preload="auto" autoplay loop>
  <source src="link-to-video">
</video>

<progress id="bgVidProgress" max="100" value="0"></progress>

JS

var vid = document.querySelector("#preview-vid");
var progress = document.getElementById("bgVidProgress");

vid.addEventListener('progress', function() {
  progress.value = Math.round((this.buffered.end(0) / this.duration) * 100);
});

Edit: This issue only appears in Safari, but not Firefox & Chrome.

Edit: Updated code

Answer 1

视频元素有no "load" event，所以你的进步＆＃34;事件监听器永远不会被添加。这应该够了......

var vid = document.querySelector("#preview-vid");
var progress = document.getElementById("bgVidProgress");

vid.addEventListener('progress', function(){
  var loadedPercentage = (vid.buffered.end(0) / vid.duration) * 100;
  console.log(loadedPercentage);
  progress.value = loadedPercentage;
});

现在，正如@dandavis指出的那样，vid.buffered.end（0）只显示第一个段。因此，如果有人在第一部分加载之前跳到视频的中间，那么缓冲部分可能会有一个很大的差距，最后会有一个大的缓冲块。在编写代码时，代码将永远不会显示在进度条中。

在您的情况下，视频很短，所以您可能不会注意到。但是出于一般目的，最好有一个画布并循环遍历vid.buffered段，绘制已加载的部分。

Cannot retrieve HTML5 Video load percentage

1 个答案: