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>

我的问题是：

视频何时下载到用户浏览器？在页面加载时，还是在他按下播放时？
是否依赖于浏览器？每个浏览器是否可能在不同时间下载视频？

我之所以问这个原因，是因为我们正在探索使用付费服务来托管我们的视频文件，而不是谷歌，因此我们没有广告或其他与我们的视频混合的东西，并且正在尝试计算多少带宽我们可能会使用（并非所有访问我们网页的人都可以选择点击视频中的“播放”）。

编辑 - 如果我们指定多种类型，如mp4，ogg等，是否会下载所有兼容的支持类型？或者只是第一个支持的类型？

Answer 1

您可以指定<video>标记的属性，以便向浏览器“建议”您希望视频的行为方式：

预加载

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



none：提示作者认为用户不需要查看该视频或服务器想要将其最小化   交通;在其他方面，这个提示表明视频不应该   被缓存。



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



auto：提示用户需要优先权;在其他方面，这个提示表明，如果需要，可以下载整个视频，   即使用户不希望使用它。



空字符串：这是自动值的同义词。

更多信息here。

一般而言，MDN将比W3SCHOOLS更好地获取此类详细信息。

Answer 2

视频什么时候下载到用户浏览器？在页面加载时，还是在他按下播放时？

这取决于浏览器......

如果未指定，preload应默认为auto，但情况并非总是如此。如果未指定preload，旧版本的Safari，Opera，Chrome等可能会下载整个视频。

在Robert的回答中，您可以使用preload属性/属性定义预加载行为。如果您使用metadata，则浏览器将加载足够的（标题）数据以确定其尺寸，长度和格式，以便更新视频播放器窗口，设置时间等。

如果您支付带宽并希望对此方面进行一些控制，这将是IMO的最佳选择。如果您不需要提前确定尺寸，确定长度等，则可以使用none。

但是，无法保证浏览器实际加载了多少数据，但最新的浏览器确实在更大程度上尊重preload设置的预期用途。

视频播放器的响应速度可能不如metadata（或none），因为缓冲区中通常没有视频。 auto可能导致视频部分或全部加载，具体取决于浏览器。较新的Chrome和Firefox只会在播放视频之前加载“飞行启动”缓冲区，然后根据其他变量（缓存，长度等）尝试加载整个视频。

如果我们指定多种类型，如mp4，ogg等，是否会下载所有兼容的支持类型？或者只是第一个支持的类型？

不，如果没有连接到互联网，浏览器将首先检查type（或者如果未提供type，则从文件扩展名中猜测它），并选择第一个“可能”或“可能”可以玩（see the 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;

使用HTML 5 <video>标记时，视频何时从源下载？</video>

2 个答案:

预加载

可能的解决方法