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>
我的问题是：
我问的原因是因为我们正在探索使用付费服务来托管我们的视频文件，而不是 Google，所以我们的视频中没有广告或其他东西，并且正在尝试计算多少带宽我们可能会使用（并非所有访问我们页面的人都可以选择点击视频上的“播放”）。
编辑 - 如果我们指定多种类型，如 mp4、ogg 等，是否会下载所有兼容的支持类型？还是只是第一个支持的类型？
【问题讨论】：
您可以为 <video> 标签指定属性，这些属性将向浏览器“建议”您希望视频的行为方式：
预加载
此枚举属性旨在为浏览器提供提示 关于作者认为会带来最佳用户体验的内容。它 可能具有以下值之一：
无：暗示作者认为用户不需要查看该视频，或者服务器希望将其最小化 交通;在其他方面，此提示表明视频不应 被缓存。
元数据： 暗示虽然作者认为用户不需要查阅该视频，但获取元数据（例如长度）是 合理。
auto：提示用户需要优先；换句话说，这个提示表明，如果需要，可以下载整个视频， 即使用户不希望使用它。
空字符串：是auto值的同义词。
更多信息here.
总的来说，MDN 将是比 W3SCHOOLS 更好的获取此类详细信息的资源。
【讨论】：
视频何时下载到用户浏览器？在页面加载时，还是在他按下播放键时？
这取决于浏览器...
如果未指定，preload 应默认为 auto，但并非总是如此。如果未指定preload，旧版本的 Safari、Opera、Chrome 等可能会下载整个视频。
正如罗伯特的回答，您可以使用preload 属性/属性定义预加载行为。如果您使用metadata，那么浏览器将加载足够的（标题）数据以确定其尺寸、长度和格式，以便它可以更新视频播放器窗口、设置时间等。
如果您为带宽付费并希望对此方面进行一些控制，这将是 IMO 的最佳选择。如果您不需要提前确定尺寸、确定长度等，则可以使用none。
然而，无法保证浏览器实际加载多少数据，但最新的浏览器确实在更大程度上尊重了preload 设置的预期目的。
视频播放器的响应速度可能不如metadata（或none），因为缓冲区中通常没有准备好的视频。 auto 可能会导致视频部分或全部加载，具体取决于浏览器。较新的 Chrome 和 Firefox 只会加载“flying-start”缓冲区，直到您播放视频，然后根据其他变量（缓存、长度等）可能会尝试加载整个视频。
如果我们指定多种类型，如 mp4、ogg 等，是否会下载所有兼容的支持类型？还是只是第一个支持的类型？
不，浏览器将首先检查type（如果没有提供type，则从文件扩展名中猜测它）而不连接到互联网，然后选择它“可能”或“可能”可以播放的第一个（@ 987654321@ 方法）。尽量始终提供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;
【讨论】：