视频
[TOC]
添加视频
TL;DR
使用
video元素在网站上加载、解码以及播放视频。制作多种格式的视频，使其可以在多种移动平台上播放。
正确设定视频大小，确保它们不会溢出容器。
无障碍服务很重要；添加
track元素作为video元素的子元素。
添加视频元素
添加 video 元素，以便在网站上加载、解码以及播放视频：
This browser does not support the video element.
指定多个文件格式
可以使用 <source> 元素指定多种格式。
例如：
浏览器在解析 <source> 标记时，会使用可选的 type 属性帮助确定要下载并播放的文件。 如果浏览器支持 WebM，则会播放 chrome.webm，否则，浏览器会检查自己是否可以播放 MPEG-4 视频。
请参阅 A Digital Media Primer for Geeks，详细了解视频和音频在网络中的工作原理。
与提供不同的 HTML 或服务器端脚本相比，此方法有诸多优势，这一点在移动设备上表现得尤为显著：
开发者可以根据自己的喜好排列格式顺序。
本地客户端转换的延迟时间缩短；只需发出一个请求即可获取内容。
与使用包含 User Agent 检测的服务器端支持数据库相比，允许浏览器选择格式更简单、更快捷并且更可靠。
指定每个文件的来源类型可提升网络性能；浏览器无需下载部分视频以“嗅探”其格式，就可以选择视频来源。
所有这些在移动环境中尤为重要，因为在移动环境中，带宽和延迟的影响最大，用户的耐心可能十分有限。当多个来源具有不支持的类型时，不添加 type 属性可能会影响性能。
使用移动浏览器开发者工具比较具有 type 属性的网络活动和没有 type 属性的网络活动。
同时，请检查浏览器开发者工具中的响应标头以确保服务器报告正确的 MIME 类型；否则，视频来源类型检查将不起作用。
指定开始时间和结束时间
节省带宽并提高网站的自适应性：使用 Media Fragments API 为视频元素添加开始时间和结束时间。
此浏览器不支持视频元素。
要添加媒体片段，只需向媒体网址添加 #t=[start_time][,end_time] 即可。 例如，要播放第 5 秒和第 10 秒之间的视频，请指定以下代码：
您还可以使用 Media Fragments API 提供有关同一个视频的多个视图，就如 DVD 中的记忆点一样，而无需编码和提供多个文件。
注意：除 iOS 之外的大多数平台都支持 Media Fragments API。此外，确保服务器支持 Range Requests。默认情况下，多数服务器中的 Range Requests 处于启用状态，不过，有些托管服务可能会将其停用。
使用浏览器开发者工具检查响应标头中的 Accept-Ranges: bytes：
包括海报图像
为 video 元素添加 poster 属性，以便用户可以在元素加载后立即了解其内容，而无需下载或播放视频。
如果视频 src 损坏或提供的视频格式均不受支持，那么海报也可用作后备资源。 海报图像唯一的缺点是它需要一个额外的文件请求，这不仅会占用一些带宽，还需要进行渲染。如需了解详细信息，请参阅图像优化。
下图对不含海报图像的视频和含海报图像的视频进行了并排比较，我们已将海报图像设为灰色，以表示它不是视频：
为旧版平台提供替代方案
并非所有的视频格式都可以受到所有平台的支持。查看各大平台支持哪些格式，并确保您的视频能以所有这些格式运行。
查看支持的格式
使用 canPlayType() 找出支持的视频格式。此方法所带的字符串参数包括一个 mime-type 和可选编解码器，返回以下某个值：
以下是一些 canPlayType() 参数示例和在 Chrome 中运行时的返回值：
制作多种格式的视频
许多工具都可以帮助您将同一视频保存为多种格式：
桌面工具：FFmpeg
在线编码/转码服务：Zencoder、Amazon Elastic Encoder
查看所用的格式
想了解浏览器实际所选的视频格式吗？
在 JavaScript 中，使用视频的 currentSrc 属性即可返回所用的来源。
正确调整视频大小
谈到如何让用户始终感到满意，文件大小很重要。
TL;DR
请不要提供帧尺寸或质量超过平台处理能力的视频。
请严格根据需要控制视频的长度。
视频过长可能导致下载和搜寻停顿；一些浏览器可能需要等到视频下载完毕才能开始播放。
检查视频大小
编码时的实际视频帧尺寸可能不同于 video 元素尺寸（这与显示的图片尺寸可能并非其实际尺寸是一个道理）。
要检查视频的编码大小，请使用 video 元素的 videoWidth 和 videoHeight 属性，width 和 height 返回 video 元素的尺寸，这些尺寸可能已使用 CSS 或内联宽度和高度属性进行过调整。
确保视频不会溢出容器
如果 video 元素过大，视口容纳不下，则可能会从容器中溢出，从而使用户无法观看内容或使用控件。
可以使用 JavaScript 或 CSS 控制视频尺寸。JavaScript 内容库和插件（如 FitVids）可以维持合适的视频大小和纵横比，即使是 YouTube 和其他来源中的 Flash 视频也不例外。
使用 CSS 媒体查询来根据视口尺寸指定元素大小；max-width: 100% 是您的好帮手。
对于 iframe 中的媒体内容（如 YouTube 视频），请尝试使用自适应方法（如 John Surdakowski 提出的方法）。
注意：请勿强制调整元素尺寸，否则会使宽高比异于原始视频。挤压或拉伸都会造成较差的视觉效果。
CSS：
HTML：
自定义视频播放器
不同的平台显示视频的方式也不相同。移动解决方案需要考虑设备方向。 使用 Fullscreen API 可以控制视频内容的全屏视图。
设备方向在不同设备中的工作原理
台式机显示器或笔记本电脑没有设备方向问题，但设备方向对移动设备或平板电脑网页设计至关重要。
iPhone 版 Safari 可以在横向和纵向之间自由转换：
iPad 和 Android 版 Chrome 中的设备方向问题十分棘手。例如，在未进行自定义设置的情况下，在 iPad 上横向播放的视频如下所示：
使用 CSS 设置视频 width: 100% 或 max-width: 100% 可解决许多设备方向布局方面的问题。 您还可以考虑全屏模式替代方案。
内联或全屏显示
控制内容的全屏模式
不强制视频全屏播放的平台为 Fullscreen API 提供广泛支持。 使用此 API 可以控制内容或网页的全屏模式。
以全屏模式显示某元素，如视频：
以全屏模式显示整个文档：
您还可以侦听全屏状态变化：
或者，查看元素当前是否处于全屏模式：
您也可以使用 CSS :fullscreen 伪类来更改全屏模式下元素的显示方式。
此浏览器不支持视频元素。
在支持 Fullscreen API 的设备中，考虑将缩略图用作视频占位符：
要了解此操作实例，请观看演示。
Dogfood：requestFullScreen() 可能添加了供应商前缀，并且可能需要额外代码才能实现全面的跨浏览器兼容性。
无障碍服务很重要
无障碍服务并非一项功能。失聪用户无法理解没有字幕的视频，而失明用户则无法观看没有解说的视频。向视频中添加这些内容所花费的时间代价比为用户提供糟糕体验所付出的代价要小得多。至少为所有用户提供基础体验。
添加字幕以改善无障碍服务
要使媒体在移动设备上更易访问，请使用 track 元素添加字幕或说明。
添加 track 元素
您可以轻松为视频添加字幕，只需添加一个 track 元素作为 video 元素的子项即可：
跟踪元素的 src 属性决定跟踪文件的位置。
在跟踪文件中定义字幕
跟踪文件包括 WebVTT 格式的定时“提示”：
Dogfood：Chrome（Android 版）、iOS Safari 以及当前的所有桌面版浏览器（Firefox 除外）均支持 track 元素（请参阅 caniuse.com/track）。此外，还有一些 polyfill。我们建议使用 Captionator。
快速参考资料
Video 元素属性
要查看 video 元素属性的完整列表及其定义，请参阅 video 元素规范。
自动播放
在桌面设备上，autoplay 会指示浏览器立即下载并播放视频。在 iOS 设备和 Chrome（Android 版）中，autoplay 不起作用；用户必须点按屏幕才能播放视频。
即使是在可以进行自动播放的平台上，您也需要考虑将其启用是否妥当：
流量消耗的费用可能十分高昂。
使媒体不事先询问就开始下载和播放可能会在无意间占用带宽和 CPU，从而使页面呈现出现延迟。
用户可能处于不便播放音频或视频的环境中。
可通过 [WebSettings API](https://developer.android.com/reference/android/webkit/WebSettings.html#setMediaPlaybackRequiresUserGesture(boolean)) 在 Android WebView 中配置自动播放行为。默认情况下它处于启用状态，但是 WebView 应用可选择将其停用。
预加载
preload 属性会提示浏览器应预加载的信息或内容量。
preload 属性在不同平台上的效果不同。例如，Chrome 在桌面设备上可以缓冲 25 秒的视频，却无法在 iOS 或 Android 设备上缓冲。这意味着，移动设备上可能会出现播放启动延迟，而在桌面设备上却不会出现这种情况。请参阅 Steve Souders 的测试网页，了解全部详情。
JavaScript
The HTML5 Rocks Video article 详尽地总结了可用于控制视频播放的 JavaScript 属性、方法以及事件。我们在此处添加了上述内容，并根据移动设备的具体要求对相关点进行了更新。
属性
移动设备既不支持 playbackRate（观看演示），也不支持 volume。
方法
除非以响应用户操作（例如点击按钮）的方式调用 play() 和 pause()， 否则这两种方法无法在移动设备（Android 版 Opera 除外）上起作用：观看演示。（同样，您也无法对嵌入式 YouTube 视频等内容执行开始播放的操作。）
事件
以下只是部分可能会触发的媒体事件。请参阅 Mozilla 开发者网络上的媒体事件页面，查看完整列表。
Last updated
