如何防止播放前加载html5视频？答案

【问题标题】：How to prevent html5 video from loading before playing?如何防止播放前加载html5视频？
【发布时间】：2012-12-27 07:58:47
【问题描述】：

我在一个页面上有几个 html5 视频，我刚刚意识到，当您访问该页面时，所有视频都开始加载，即使我没有点击任何一个播放。

有没有办法只在点击播放后加载视频，以防止不必要的下载？

【问题讨论】：

标签： html video html5-video

【解决方案1】：

只需使用<video preload="none">

如果您只想加载视频的元数据，请使用<video preload="metadata">

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls="controls" preload="none">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

</body>
</html>

使用预加载“无”

http://diveintohtml5.info/video.html

【讨论】：

这是否显示任何快照或显示视频外观的图像？
对于预览，属性poster 必须设置为链接到图像文件。视频标签不会自动从视频中提取任何内容来生成缩略图。
我发现 Safari 忽略了这个属性并下载了文件，而 Chrome 没有 - 正如@Gaby 的引用所暗示的那样，这只是一个提示。顺便说一句，浏览器开发工具目前似乎在处理视频问题 - Chrome 和 FF 中都有一个错误，这意味着对媒体文件的请求不会显示在网络选项卡中。它们出现在 Safari 中，但没有大小、时间线和其他内容的元数据。

【解决方案3】：

您应该使用preload 属性，并将其值设置为none。

引用the <video> specification

preload = "none" or "metadata" or "auto" or "" (空字符串 em>) 或为空
向 UA 暗示是否值得乐观地下载视频本身或其元数据。
- "none"：向 UA 提示用户不需要视频，或者希望尽量减少不必要的流量。

【讨论】：