如何使用 HTML5 语法在 Web 页面中嵌入视频呢非常简单：

就是这些！这就是向网站添加视频播放器所需的全部工作，无需任何第三方插件或嵌入其他网站的代码只要一个简单的標记即可。

实际情况可没有这么简单

HTML5 的复杂性与语法无关，而是源自浏览器支持和视频编码Web 开发人员习惯了纠结于浏览器的兼容性，泹浏览器制造商在编解码器标准方面的分歧更让人头疼为了构建一个成功的 HTML5 网站，您需要考虑 Chrome 4、Firefox 4 和 Internet Explorer 之类的现代浏览器如何实现 HTML5 视频 Web 标准以及如何处理html5用户登录页面在旧版浏览器中查看视频的情况。

首先要设定期望值，您应该知道播放视频时  的限制

HTML5 规范中目前还没有包括全屏播放。目前只有几个浏览器（不是全部）支持全屏播放

默认的播放器菜单都是非常基础的，而在品牌认知的皮肤或复杂的观感仩可能花了很多开发精力除此之外，不同的浏览器仍以不同的方式实现 HTML5 和 CSS例如，添加圆角时您的视频播放器在  和 中看起来可能是圆角，但在  和 Safari

规范不允许平滑或自适应流而这是一个正规视频播放网站的基本功能。

更重要的是规范并不（而且显然不会）包括数字版權管理 (DRM)。这意味着永远不会通过 HTML5 传递受版权保护的内容（至少版权持有人不会）

当然还有编解码器的问题。稍后将提供此主题的更多信息

您放弃这些东西后得到了什么？实际上得到的不多。

首先不专注于视频的网站其开发人员可以更加容易地实现网站流媒体，而无需通过第三方视频网站如YouTube 或 Vimeo 等。以前开发人员直接嵌入视频有三种主要的选择：

• 嵌入必须完整下载后才能播放的非流媒体文件
• 购买第彡方插件（这不一定适用于所有浏览器）
• 使用专用的媒体服务器，这是一个非常昂贵且/或对于大部分网站而言太过复杂的解决方案

HTML5 允许开發人员在无需其他第三方软件支持的可更换皮肤播放器中实现流媒体从而缓解了这些问题。

第二HTML5 规范允许开发人员为已有定论的平台提供视频，如iOS 产品（iPhone、iPad）但看待这个问题的方式有点不同，它使开发人员从限制或控制如何交付媒体的专有交付平台中解放出来毕竟，这是开放标准的目的所在

最后，HTML5 不是外来的技术它是HTML 的最新修订版。这意味着 JavaScript 和 CSS 能够与它很好地协作与现有的 HTML 源代码一样，开发囚员可以在客户端或服务器端操作这些代码

前文已经提到，HTML5 视频最大的挑战是在多个编码解码器中准备和纳入您的内容目前，每个浏覽器有其自己的首选视频格式非无缝实现的 HTML5 视频将会变得更糟。

现在视频编码有三种选择：

1. H.264 – 一种可以利用硬件加速的流行格式由桌媔和设备的图形芯片提供支持；也是市场上许多较新的视频和移动设备的默认录制格式；但是，该格式是有专利的虽然对非商业用途仍嘫免费，但它很复杂也比较昂贵。请参考了解更详细信息何时进行商业内容分发。支持：IE 9、Safari 3.1 和 Chrome（目前）

下图可让您更容易了解此内容：

Chrome 值得特别一提因为 Google 实际将删除对三种 HTML5 视频格式之一的支持。收购 On2（WebM 格式的开发商和赞助商）后Google 宣布以后的 Chrome 的版本将不再支持 H.264。他们巳经根据 BSD 许可证发布了 WebM授予全球html5用户登录页面免费、非独占的、免版税的专利许可。虽然 Chrome 是目前唯一支持所有三种格式的浏览器但市場将会很快分成两个 OS 默认的浏览器阵营，只支持 H.264 的和 Safari以及支持除 H.264 外其他标准的所有其他浏览器。

严重警告：为了简化此处的讨论本说奣不深入探讨三种基本格式之间的差异。一旦涉及视频和音频配置文件的不同可能性以及视频和音频容器和编解码器 之间的区别，事情會变得更加复杂例如，虽然 iPhone 4 用 H.264 格式录制视频但不能将该视频直接放到 HTML5 网站；必须先通过转换器运行它。

最好能有一个无所不包的公告说明视频标准X 是普遍支持的，应该作为HTML5 视频的首选格式不幸的是，正如您从上文看到的情况并非如此。如果您包括html5用户登录页面驱動的浏览器扩展那么支持最广泛的格式就是 Ogg Theora。但是你不能假定html5用户登录页面，特别是公司工作场所中的html5用户登录页面只是为了观看 HTML5 視频就拥有安装其他视频编解码器或浏览器扩展的知识或能力。如果出于某种原因您必须选择某一个视频编解码器，应该选择哪一个這不一定。考虑以下选择：

在这三个标准中H.264 最具人气，质量可靠受到了媒体专业人士的认可。它还受到一些业内最大公司的支持包括Microsoft 和苹果，具有MPEG LA 的授权因此也有个最主要的问题：H.264 不是免费的。

对于消费者来说它当然是免费的。大部分开发人员都不用担心授权问題（）但是，视频分发网站就不一定了H.264 专利授权的来龙去脉超出了本文的范围（），只要说大家有很多问题就够了

对于大多数开发囚员，专利问题将很大程度上归结于和图像质量之间的哲学争论与 Ogg（参见下文）和VP8 () 相比，H.264 提供了更高的图像质量和更好的媒体流由于包括 PC 和移动设备等多种平台上都具有硬件加速功能，它还具备性能优势

最后，考虑易生产性这不是一个无关紧要的问题。所有主要的視频编辑器包括 Final Cut、Adobe Premiere 和 Avid，都导出为 H.264 格式Ogg Theora 或 VP8 则不行。如果您的商店生产自己的视频并且数量众多，那么仅使用 H.264 将节省很多工作

Ogg 是唯一┅个真正没有专利负担的标准。但是也可以说是的标准，虽然相差其实不多与H.264 的多次发现，H.264 仍占上风虽然 Ogg 可将内容编码为更紧凑的攵件，但它产生的图像品质比 H.264 的要低并且在媒体流能力上会更差。

在高质量但存在专利问题 (H.264) 和质量较差但免费 (Ogg) 这两个极端之间VP8 占有一席之地，它可能三个标准中最具争议的一个到目前为止，测试表明 H.264 提供的视频品质比  略高但这种差异在大多数商业活动中可以忽略不計。

更大的问题在于开放标准一方认为，Google 远离了 H.264 转而支持其“开放”甚至在 Creative Commons 许可证下发布了 WebM。另一方面有很多人争论说，在这种情況下“开放”。以 JPEG 诉讼为例，即使 WebM 不会出现 Google 引起的专利问题如果没有 Google 明确的html5用户登录页面免责申明，许多公司和个人部署 WebM 视频时嘟有可能让自己面临

总之，在大多数情况下没有一种办法能满足所有情况下所有项目的需要。但对于大多数情况下的大多数项目您可能都希望使用 H.264。它不仅仅是生产和消费端使用最广泛的格式而且由于硬件加速而具有明显的性能优势。对于商业的视频网站为了开拓噺市场，可能必须咬紧牙关支 付庞大的许可费

但是，这场辩论往往由于一个主要因素而无果而终：现在或在不久的将来所有浏览器是否都支持 HTML5。但是并非所有浏览器都支持所有编解码器。就像您不会编写在 IE 中看起来不错但在 Firefox 中一团糟的样式表一样，您希望创建跨平囼兼容的视频标签

对于开发人员，这意味着在实际情况下需要将视频内容至少编码为两种视频格式（最好是三个）才能符合 HTML5 规范的要求幸运的是，有几个工具随时可以帮助您完成此任务

：您的主要工具，此开放源代码转换器有 Mac 和 Windows 版本可以将几乎所有视频源转换为所囿可能要使用的 HTML5 格式，以及几个其他设备和平台特定的格式

：MPEG Streamclip 虽然是不开放源代码，但Mac 和 Windows html5用户登录页面可以免费使用它也处理 lH.264，同时咜也可以转换为 HTML5 规范之外的许多其他有用格式

：一种专业工具，Firefogg 是一个 Firefox 扩展只能将视频转换为 Ogg 的格式，并因此得名要使用它，需要先下载 Firefox然后再安装扩展。

您应该会记得HTML5 在嵌入视频时本质上归结为使用一个标记：<video>。但正如其他 HTML 标记一样有很多参数选项。以下是標记本身中的一些要点：

src：视频源的位置和名称它的工作原理与 <img> 标记的 src 参数相同。但是要注意在这里不是识别视频源，您可以并且也應该在标记外部识别（参见下文）

width和height：（可选）视频的尺寸。更准确地说这是视频帧宽度和高度，而不是视频本身与 <img> 相似，省去此選项将导致浏览器使用视频源的默认尺寸但是与 <img> 不同的是，使用与源不同的大小将缩放视频而不是扭曲它。换句话说嵌入的视频将保留其源的比率。如果您指定的大小小于源整个视频将会缩小。但是如果 您指定的大小大于源，视频将以其原始大小显示所指定尺団的其余部分将使用空白区域填充。

controls：添加默认视频控件覆盖如果您不想创建自己的自定义控件，这是非常有用的但是，如果想深入 研究自定义播放器控件可以使用 JavaScript 和 CSS。该规范允许操作 play ()、pause()、currentTime、volume、muted 等方法和属性

preload：只要html5用户登录页面点击页面就开始下载视频。要指示预加载视频只需包括该属性。要指示其不预加载将该属性设置为等于"none"。

autoplay：流氓参数该参数指示浏览器加载页面时就播放视频。不要使鼡它

接下来是见证奇迹的时刻。HTML5 规范包括一个方便的古怪功能可以弥补当前围绕视频格式所发生的浏览器功能障碍。不使用 src 属性指定視频源您可以在<video> 标记中嵌套多个标记，每个都有不同的视频源浏览器将自动浏览列表并选择第一个能够播放的视频。例如：

如果在 Chrome 中測试该代码将获得 H.264 视频。但是在 Firefox 中运行它会在相同的地方看到 Ogg 视频。

理想情况下虽然不是所有浏览器都绝对需要，您应该在 type 参数中包括 MIME 类型确保与所有的浏览器兼容。此参数应指定视频类型以及视频和音频编解码器。参数的细节取决于视频的编码方式在这里可鉯找到很多可能的方案：。

有关正在使用的所有三种视频类型的示例请访问。

在此页面上您会看到三个不同视频的源代码：H.264、Ogg 和 WebPM。视頻本身标有它们的编解码器以便您查看浏览器中显示的内容。

虽然完整的多源 <video> 标记可在多个 HTML5 就绪的浏览器上工作但它仍然没有解决旧嘚、HTML5 之前的浏览器问题。幸运的是该规范包括一个向下兼容机制。

将目前正在使用的任何<object> 标记或者将使用的 HTML5 之前的标记，添加到 <source> 参数列表的底部通常情况下，此对象将指定您使用的播放器（假定是第三方插件）以及该播放器的参数和源。下例使用流行的免费第三方播放器 Flowplayer

这篇精彩文章更详细地解释了这一点：Kroc Camen “"。您还可以从这里查找包含所有三种视频格式和 flash 对象的代码生成器：Jonathan Neal 的 “”

查看以下內容，了解HTML5 视频的更多信息包括特定编解码器的复杂性：

•  – 如何快速地在您的网站上浏览高清视频
•  – 有关一般的 HTML5 和视频学习的重要资源
•  –比较不同视频编解码器（包括浏览器插件）的网站
•  – 关于 Ogg Theora 的更多内容，包括音频和视频编解码器、播放器和转换器
•  – 一篇有趣的报道關于相互竞争的编解码器标准和浏览器制造商的观点