<video> 和 <source> 标记

Derek Herman
Derek Herman
X GitHub
Joe Medley
Joe Medley
GitHub
Sam Dutton

您已经为网络正确准备视频文件。您应为其指定正确的尺寸和分辨率您甚至针对不同的浏览器分别 创建了 WebM 和 MP4 文件

要想让任何人都能看到你的视频，你仍需将该视频添加到网页中。为此，您需要添加两个 HTML 元素：<video> 元素和 <source> 元素。除了有关这些标记的基础知识之外，本文还介绍了您应向这些标记添加的属性，以打造良好的用户体验。

指定单个文件

您可以单独使用视频元素，但我们不建议您这样做。请始终使用 type 属性，如下所示。浏览器使用此数据来确定能否播放所提供的视频文件。如果没有显示，则会显示封闭的文本。

<video src="chrome.webm" type="video/webm">
    <p>Your browser cannot play the provided video file.</p>
</video>

指定多种文件格式

回想一下媒体文件基础知识部分，并非所有浏览器都支持相同的视频格式。借助 <source> 元素，您可以指定多种格式作为后备，以防用户的浏览器不支持其中一种格式。

以下示例会生成嵌入式视频，本文稍后将用作示例。

<video controls>
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.</p>
</video>

在 Glitch 上试用

您应始终将 type 属性添加到 <source> 标记事件中，尽管该属性是可选的。这样可以确保浏览器只下载能够播放的文件。

与提供不同的 HTML 或服务器端脚本相比，此方法具有诸多优势，尤其是在移动设备上：

  • 您可以按偏好顺序列出格式。
  • 客户端切换可缩短延迟时间；只需发出一个请求即可获取内容。
  • 与使用包含用户代理检测的服务器端支持数据库相比，允许浏览器选择格式更简单、更快捷且更可靠。
  • 指定每个文件来源的类型可提高网络性能；浏览器无需下载部分视频以“嗅探”其格式，就可以选择视频来源。

这些问题在使用移动环境中尤为重要，因为在此类环境中，带宽和延迟时间都非常高，而且用户的耐心可能有限。当存在多个类型不受支持的来源时，省略 type 属性可能会影响性能。

您可以通过多种方式深入了解细节。查看 A Digital Media Primer for Geeks，详细了解视频和音频在网络上的运作方式。您还可以使用开发者工具中的远程调试来比较具有类型属性和不使用类型属性的网络活动。

指定开始时间和结束时间

节省带宽并提高网站的自适应性：使用媒体片段为视频元素添加开始时间和结束时间。

如需使用媒体片段，请将 #t=[start_time][,end_time] 添加到媒体网址。例如，如需从第 5 秒到第 10 秒播放视频，请指定以下代码：

<source src="video/chrome.webm#t=5,10" type="video/webm">

您也可以在 <hours>:<minutes>:<seconds> 中指定时间。例如，输入 #t=00:01:05 会从 1 分 5 秒开始播放视频。如需仅播放视频的第 1 分钟，请指定 #t=,00:01:00。

借助此功能，您可以传送同一视频的多个视图（如 DVD 中的广告插入点），而无需编码和传送多个文件。

如需使此功能正常运行，您的服务器必须支持范围请求，并且必须启用该功能。默认情况下，大多数服务器都会启用范围请求。由于某些托管服务会关闭它们，因此您应该确认范围请求可用于在您的网站上使用 fragment。

幸运的是，您可以在浏览器的开发者工具中执行此操作。例如，在 Chrome 中，此设置位于“网络”面板中。查找 Accept-Ranges 标头，验证其是否显示 bytes。在图片中，我在此标题周围绘制了一个红色框如果您没有看到 bytes 作为值，则需要与您的托管服务提供商联系。

Chrome 开发者工具屏幕截图：Accept-Ranges:bytes。
Chrome 开发者工具屏幕截图：Accept-Ranges:bytes。

包含海报图片

向 video 元素添加 poster 属性，以便观看者在元素加载后立即了解其内容，而无需下载视频或开始播放。

<video poster="poster.jpg" ...>
  …
</video>

如果视频 src 损坏或提供的视频格式均不受支持，那么海报也可用作后备广告。海报图片的唯一缺点是需要额外的文件请求，这会占用一些带宽并需要渲染。如需了解详情，请参阅对图片高效编码。

错误做法
如果没有后备海报，视频看起来就是损坏的。
如果没有后备海报，视频看起来就很损坏。
正确做法
后备海报看起来就像第一帧已经拍摄完毕一样。
后备海报看起来就像第一帧已经拍摄完毕。

确保视频不会溢出容器

如果视频元素太大，无法容纳视口，则可能会溢出容器，导致用户无法查看内容或使用控件。

Android 版 Chrome 屏幕截图（纵向）：未设置样式的视频元素溢出了视口。
Android 版 Chrome 屏幕截图（纵向）：未设置样式的视频元素溢出了视口。
Android 版 Chrome 屏幕截图（横向）：未设置样式的视频元素溢出了视口。
Android 版 Chrome 屏幕截图（横向）：未设置样式的视频元素溢出了视口。

您可以使用 CSS 控制视频尺寸。如果 CSS 不能满足您的所有需求，即使是来自 YouTube 和其他来源的视频，JavaScript 库和插件（如 FitVids）也能有所帮助。遗憾的是，这些资源可能会增加您的网络载荷大小，给您的收入和用户钱包带来负面影响。

对于像我在这里介绍的那些简单用途，可以使用 CSS 媒体查询根据视口尺寸指定元素的大小；不妨使用 max-width: 100%。

对于 iframe 中的媒体内容（例如 YouTube 视频），请尝试使用自适应方法（例如 John Surdakowski 提出的方法）。

CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML

<div class="video-container">
  <iframe
    src="//www.youtube.com/embed/l-BA9Ee2XuM"
    frameborder="0"
    width="560"
    height="315"
  ></iframe>
</div>

试试看

将自适应示例与无响应版本进行比较。如您所见，无响应的版本无法提供出色的用户体验。

设备方向

桌面设备显示器或笔记本电脑没有设备方向问题，但在考虑移动设备和平板电脑的网页设计时，设备方向非常重要。

iPhone 版 Safari 可以在纵向和横向之间自由切换：

iPhone 版 Safari 中播放的视频的屏幕截图（纵向）。
iPhone 版 Safari 中播放的视频的屏幕截图（纵向）。
iPhone 版 Safari 中播放的视频的屏幕截图（横向）。
iPhone 版 Safari 中播放的视频的屏幕截图（横向）。

iPad 和 Android 上的 Chrome 中的设备屏幕方向可能存在问题。 例如，如果不进行任何自定义，在 iPad 上横屏播放的视频将如下所示：

iPad 版 Safari 中播放的视频的屏幕截图（横向）。
iPad 版 Safari 中播放的视频的屏幕截图（横向）。

使用 CSS 设置视频 width: 100% 或 max-width: 100% 可以解决许多设备屏幕方向布局问题。

自动播放

autoplay 属性用于控制浏览器是否立即下载并播放视频。其具体运作方式取决于平台和浏览器。

  • Chrome：取决于多种因素，包括但不限于用户是否在桌面设备上进行查看，以及移动用户是否已将您的网站或应用添加到其主屏幕。如需了解详情，请参阅自动播放最佳做法。

  • Firefox：屏蔽所有视频和声音，但可让用户针对所有网站或特定网站放宽这些限制。如需了解详情，请参阅在 Firefox 中允许或禁止媒体自动播放

  • Safari：过去需要用户手势，但在最近的版本中逐渐放宽了这项要求。如需了解详情，请参阅适用于 iOS 的新 <video> 政策。

即使在支持自动播放的平台上，您也需要考虑是否最好启用该功能：

  • 流量消耗的费用可能很高。
  • 在用户希望之前播放媒体会占用带宽和 CPU，从而延迟页面渲染。
  • 用户可能处于播放视频或音频的干扰环境。

预加载

preload 属性会提示浏览器要预加载的信息或内容量。

值 说明
none 用户可能会选择不观看视频，因此不要预加载任何内容。
metadata 应预加载元数据（时长、尺寸、文字轨道），但尽量减少视频加载量。
auto 最好立即下载整个视频。空字符串会生成相同的结果。

preload 属性在不同平台上的效果不同。例如，Chrome 在桌面设备上可以缓冲 25 秒的视频，但在 iOS 或 Android 设备上无法缓冲。这意味着，在移动设备上，播放启动延迟可能不会出现在桌面设备上。如需了解详情，请参阅通过预加载音频和视频实现快速播放或 Steve Souders 的博客。

现在，您已经知道如何向网页添加媒体了，接下来我们了解一下媒体无障碍功能，即如何为听障人士为视频添加字幕，或者播放音频时不可行。