完全加载后播放 html5 视频

Question

我正在寻找一种在完全加载后播放 HTML 视频的方法。我尝试在视频缓冲完成时获得反馈，但它不起作用。这是我的代码：

var player = document.getElementById('bgvid');
player.addEventListener("progress", function() {
  console.log("1");
  if (player.buffered.length > 0) {
    console.log("2");
    var bufferedEnd = player.buffered.end(player.buffered.length - 1);
    var duration = player.duration;
    console.log(duration);
    if (duration > 0) {
      console.log((bufferedEnd / duration) * 100);
    }
  }
});

我在控制台上只得到“1”，所以 buffer.length 即使在 "auto" 上设置了 preload 属性也永远不会超过零。唯一有所不同的是自动播放属性。当打开时，我得到控制台中显示的缓冲区百分比，但如果我暂停视频，它会再次停止缓冲。

提前感谢您的任何想法。

Answer 1

您可以使用 canplaythrough 事件来检查视频是否已完全缓冲（即：加载）。

希望这就是您要找的，祝您好运。

Answer 2

在@Offbeatmammal 的帮助下，我设法解决了我的问题。答案在这里：Another: Force Chrome to fully buffer mp4 video。谢谢大家的回答:D

完全加载后播放 html5 视频

play html5 video after fully loaded

html

video

progress

preload