您已正确准备了视频文件,以便在网络上播放。您提供的尺寸和分辨率正确无误。您甚至为不同的浏览器创建了单独的 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="chrome.webm" type="video/webm">
<source src="chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
虽然 type
属性是可选的,但您应始终向 <source>
代码事件添加此属性。这样可以确保浏览器仅下载其能够播放的文件。
与提供不同的 HTML 或服务器端脚本相比,此方法有诸多优势,这一点在移动设备上表现得尤为显著:
- 您可以根据自己的喜好排列格式顺序。
- 客户端转换的延迟时间缩短;只需发出一个请求即可获取内容。
- 与使用包含 User Agent 检测的服务器端支持数据库相比,允许浏览器选择格式更简单、更快捷并且更可靠。
- 指定每个文件的来源类型可提升网络性能;浏览器无需下载部分视频以“嗅探”其格式,就可以选择视频来源。
这些问题在移动环境中尤为重要,因为在移动环境中,带宽和延迟的影响最大,用户的耐心可能十分有限。如果存在多个类型不受支持的来源,则省略 type
属性可能会影响性能。
您可以通过以下几种方式深入了解详情。请参阅达人数字媒体入门,详细了解视频和音频在网络中的工作原理。您还可以使用 DevTools 中的远程调试功能,比较具有 type 属性和不具有 type 属性的网络活动。
指定开始时间和结束时间
节省带宽并提高网站的自适应性:使用媒体 fragment 为视频元素添加开始时间和结束时间。
如需使用媒体片段,请将 #t=[start_time][,end_time]
添加到媒体网址。例如,要播放第 5 秒到第 10 秒之间的视频,请指定:
<source src="chrome.webm#t=5,10" type="video/webm">
您还可以在 <hours>:<minutes>:<seconds>
中指定时间。例如,#t=00:01:05
可从视频的一分零五秒处开始播放。如需仅播放视频的前 1 分钟,请指定 #t=,00:01:00
。
您可以使用此功能提供有关同一个视频的多个视图(就像 DVD 中的记忆点一样),而无需编码和提供多个文件。
为了让此功能正常运行,您的服务器必须支持范围请求,并且必须启用此功能。大多数服务器默认启用范围请求。由于某些托管服务会关闭这些请求,因此您应确认您的网站是否支持范围请求。
幸运的是,您可以在浏览器开发者工具中执行此操作。例如,在 Chrome 中,该信息位于 Network 面板中。查找 Accept-Ranges
标头,并确认其显示的是 bytes
。在图片中,我用红色方框圈出了此标题。如果您没有看到 bytes
作为值,则需要与您的托管服务提供商联系。
添加海报图片
为 video
元素添加 poster 属性,以便观看者可以在元素加载后立即了解其内容,而无需下载视频或开始播放。
<video poster="poster.jpg" ...>
…
</video>
如果视频 src
损坏或提供的视频格式均不受支持,那么海报也可用作后备资源。海报图片唯一的缺点是它需要一个额外的文件请求,这不仅会占用一些带宽,还需要进行渲染。如需了解详情,请参阅高效地对图片进行编码。
确保视频不会溢出容器
如果 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 可以在横向和纵向之间自由转换:
iPad 和 Android 版 Chrome 中的设备方向问题十分棘手。 例如,在未进行自定义设置的情况下,在 iPad 上横向播放的视频如下所示:
使用 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 的博客。
现在,您已经了解了如何向网页添加媒体内容,接下来我们来了解一下媒体无障碍功能。您可以通过此功能为视频添加字幕,以便听障人士观看,或者在播放音频不适用时使用。