HTML5中的元数据预加载属性是否会加载整个视频？

Question

使用 HTML5

video

标签时，

preload="metadata"

属性是否已加载视频？如果视频大小大于 100MB，我有点担心页面加载的性能问题。

我注意到，当具有此属性时，会加载视频第一秒的图像，但不会完全播放视频。

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

Answer 1

preload

属性向浏览器提供关于视频本身或其元数据的乐观下载是否值得的提示。

元数据不会立即下载整个视频，只会下载元数据。 规范建议将该属性设置为

metadata

。

这是包含所有可用选项的列表：

none - 向浏览器提示用户可能不会观看该内容 视频，或者最小化不必要的流量是可取的。

元数据- 向浏览器提示用户不需要该视频， 但获取其元数据（尺寸、第一帧、曲目列表、 持续时间等）是可取的。

auto - 提示浏览器 乐观地下载整个视频被认为是可取的。

更多信息：https://developer.mozilla.org/en/docs/Web/HTML/Element/video

Answer 2

根据规范，它不应该下载整个视频，而只能下载元数据，但 WebKit 浏览器显然会在元数据之前预加载整个视频。

我希望这有帮助。

另请参阅：检索 HTML5 视频持续时间时出现问题

Answer 3

这取决于浏览器和设备。

Chrome 在桌面上缓冲 25 秒的视频，但在 iOS 或 Android 上没有缓冲。

这意味着在移动设备上，可能会出现桌面上不会发生的播放启动延迟：https://developers.google.com/web/fundamentals/media/video#preload

Answer 4

也许我会投入 2 美分...... 对我来说总是有效的解决方案是在 VIDEO html 标签中设置“自动播放”“静音”选项。然后，当页面完全加载时，我会在显示视频之前在 JavaScript 中暂停、取消静音并快退视频。天哪...如果没有 JS 我们该怎么办。 HTML 有时缺少一些稳定的跨浏览器选项:) 希望这对某人有帮助。