完全加载后播放html5视频答案

【问题标题】：play html5 video after fully loaded完全加载后播放html5视频
【发布时间】：2016-07-09 22:25:43
【问题描述】：

我正在寻找一种在 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”，因此即使在“auto”上设置了 preload 属性，buffer.length 也不会超过零。唯一不同的是自动播放属性。什么时候打开，我得到控制台中显示的缓冲区百分比，但是如果我暂停视频，它会再次停止缓冲。

提前感谢您的任何想法。

【问题讨论】：

哦...我正要问这个问题？？？？看起来你打败了我。无论哪种方式，我都期待答案。
让我们希望得到答案：D
看看这个答案 - stackoverflow.com/questions/18251632/… - 它假设视频足够小，可以作为 ajax 对象缓冲，但你会确定它什么时候都在那里......
这似乎很有希望。我会试试，让你知道。谢谢你的时间
@Offbeatmammal 你的建议就像魅力一样！非常感谢您的帮助！ :D 我怎样才能给你点赞之类的？

标签： html video progress preload

【解决方案1】：

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

我希望这是你正在寻找的，祝你好运。

【讨论】：

> "canplaythrough 事件发生在浏览器估计它可以播放指定的音频/视频而无需停止缓冲"
感谢您的回答。这样视频就没有完全加载。同样由于某种原因，即使没有 preload 属性也会触发此事件。我不知道为什么。这一切都在 Chrome 51 上

【解决方案2】：

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

【讨论】：