使用HTML 5 <video>标签时，视频什么时候从源下载？

Question

W3Schools网页展示了如何使用视频标签的示例。

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

我的问题是：

1. 视频是在页面加载时还是用户按下播放键时下载到浏览器中的？
2. 是否取决于浏览器？不同的浏览器是否可能在不同时刻下载视频？

我之所以问这个问题，是因为我们正在探讨使用付费服务来托管我们的视频文件，而不是使用Google，这样我们的视频就不会被广告或其他杂物混淆了，我们也正在尝试计算我们可能使用的带宽（并非所有访问我们网页的人都会选择在视频上点击“播放”）。

编辑-如果我们指定多种类型，比如mp4、ogg等，所有兼容的支持类型都会被下载吗？还是只有第一个支持的类型会被下载？

- Rahul Iyer

Answer 1

您可以为<video>标记指定属性，以“建议”浏览器如何处理视频：

preload

此枚举属性旨在向浏览器提供关于作者认为会导致最佳用户体验的提示。它可能具有以下值之一：

• none：提示作者认为用户不需要查看该视频或服务器希望最小化其流量；换句话说，此提示表示不应缓存视频。

• metadata：提示尽管作者认为用户不需要查看该视频，但获取元数据（例如长度）是合理的。

• auto：提示用户需要优先考虑；换句话说，如果需要，即使不期望用户使用它，整个视频也可以下载。

• 空字符串：它是auto值的同义词。

更多信息请参见此处。

总的来说，MDN会比W3SCHOOLS更好地提供详细信息。

- Robert Harvey

Answer 2

视频什么时候下载到用户的浏览器中？在页面加载时还是在用户按下播放键时？这取决于浏览器...如果没有指定，preload应默认为auto，但并非总是如此。旧版的Safari、Opera、Chrome等浏览器如果未指定preload属性，则可能会下载整个视频。与Robert的回答一样，您可以使用preload属性/属性来定义预加载行为。如果使用metadata，则浏览器将加载足够的（头）数据以确定其尺寸、长度和格式，以便更新视频播放器窗口、设置时间等等。如果您支付带宽费用并想要对此方面进行一些控制，则这将是我认为最好的选择。如果您不需要提前确定维度、确定长度等，则使用none是另一种选择。然而，并不能保证浏览器实际加载了多少数据，但是现代浏览器在很大程度上尊重preload设置的预期目的。

视频播放器可能不如使用metadata（或none）那样响应迅速，因为通常缓冲区中没有准备好的视频。 auto会导致视频部分或全部加载，具体取决于浏览器。更新的Chrome和Firefox仅会加载“飞行起步”缓冲区，直到您播放视频，然后根据其他变量（缓存、长度等）尝试加载整个视频。

如果我们指定多种类型，例如mp4、ogg等，所有兼容的支持类型都会被下载吗？还是只有第一个支持的类型？

不会，浏览器将首先检查type（如果未提供，则从文件扩展名猜测），而无需连接到互联网，并选择它“可能”或“可能”可以播放的第一个类型（请参见canPlayType()方法）。尽量始终提供type（如果可能，请提供编解码器）。

当这一步骤确定后，浏览器将进入下一步，即预加载，需要连接到文件（除了preload="none"）。

可能的解决方法是在播放时使用JavaScript设置视频源，可以使用文档中预定义的元素或动态创建它。这当然会引入启动过程的延迟。对于动态创建的视频元素，您还需要手动检查视频源类型并处理各种事件。

例如（假设文档中存在一个视频元素）：

var video = document.getElementById('myVideoElement'),
    src = '';

if (video.canPlayType('video/mp4').replace('no', '').length > 0) {
    src = 'myVideo.mp4';

} else if (video.canPlayType('video/ogg').replace('no', '').length > 0) {
    src = 'myVideo.ogv';

} else if (video.canPlayType('video/webm').replace('no', '').length > 0) {
    src = 'myVideo.webm';

} else {
    /// sorry...
}

video.src = src;

- user1693593