<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 或服务器端脚本相比，此方法有诸多优势，这一点在移动设备上表现得尤为显著：

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

这些问题在移动环境中尤为重要，因为在移动环境中，带宽和延迟的影响最大，用户的耐心可能十分有限。当多个来源具有不受支持的类型时，省略 type 属性可能会影响性能。

您可以通过多种方式深入了解细节。请参阅达人数字媒体入门，详细了解视频和音频在网络中的工作原理。您还可以使用 DevTools 中的远程调试功能，比较具有 type 属性和不具有 type 属性的网络活动。

指定开始时间和结束时间

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

如需使用媒体片段，请将 #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 从一分五秒处开始播放视频。要仅播放视频的第一分钟，请指定 #t=,00:01:00。

您可以使用此功能提供同一个视频的多个视图（例如 DVD 中的广告插入点），而无需编码和提供多个文件。

为了让此功能正常运行，您的服务器必须支持范围请求，并且必须启用此功能。默认情况下，大多数服务器都会启用范围请求。由于某些托管服务会关闭这些请求，因此您应确认您的网站是否支持范围请求。

幸运的是，您可以在浏览器开发者工具中执行此操作。例如，在 Chrome 中，该信息位于 Network 面板中。查找 Accept-Ranges 标头，并确认其显示的是 bytes。在图片中，我用红色方框圈出了此标题。如果您没有看到 bytes 作为值，则需要与您的托管服务提供商联系。

Chrome DevTools 屏幕截图：Accept-Ranges: bytes。
Chrome DevTools 屏幕截图：Accept-Ranges: bytes。

添加海报图片

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

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

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

错误做法
如果没有后备海报，视频看起来就是已损坏的。
如果没有后备海报，视频看起来会很破损。
正确做法
后备海报看起来就像是第一帧被拍摄了。
回退海报会让系统看起来像已捕获第一帧。

确保视频不会溢出容器

如果 video 元素过大，视口容纳不下，则可能会从容器中溢出，从而使用户无法观看内容或使用控件。

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

您可以使用 CSS 控制视频尺寸。如果 CSS 无法满足您的所有需求，JavaScript 库和插件（如 FitVids）可以派上用场，即使是 YouTube 和其他来源的视频也不例外。遗憾的是，这些资源可能会增加网络载荷大小，对您的收入和用户的钱包造成不利影响。

对于我在这里介绍的简单用法，请使用 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 属性用于控制浏览器是否立即下载并播放视频。具体工作原理取决于平台和浏览器。

即使在可以实现自动播放的平台上，您也需要考虑启用此功能，这是否是一个好主意：

  • 流量消耗的费用可能十分高昂。
  • 在用户想要播放媒体之前播放媒体可能会占用带宽和 CPU，从而使页面呈现出现延迟。
  • 用户可能处于不便播放音频或视频的环境中。

预加载

preload 属性可提示浏览器应预加载多少信息或内容。

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

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

现在，您已经了解了如何向网页添加媒体内容，接下来我们来了解一下媒体无障碍功能。您可以通过此功能为视频添加字幕，以便听障人士观看，或者在播放音频不方便时使用。