HTML5 视频规范简介
HTML5 视频规范简介
- 创建于 2013-02-03, 周日 00:56
- 作者 白建鹏
HTML 一词是“超文本标记语言”（Hyper-Text Markup Language）的缩写，是用于描述网页文档的一种标记语言。通俗地讲，HTML 就是用来“描述” web 页面内容的一种规范，一个标准。HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的新的 HTML 标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些 HTML5 技术。
 |
| HTML5 Logo |
HTML5 有许多优势。不过，本文只介绍 HTML5 对于“网页中嵌入播放视频”的改进。
没有 HTML5 时网页上怎么播放视频？
首先来回顾一下 HTML4 时代是如何做网页上播放视频的：在 HTML5 之前，我们无法直接在浏览器中观看视频，当你点击指向 avi 或者 mp4 格式文件的 URL 时,你会发现弹出了”下载”对话框,而不是播放这些视频。那时候（现在很多网站还在这么做）想要在网页上播放视频，就必须使用第三方插件，最常见的就是 .swf 格式的一个网页播放器。—— 这种需求竟然催生了众多的网页播放器产品，其中著名的如LongTailvideo.com 开发的 JW Player（Joomla! 用户熟悉的 Allvideos 插件就是使用此播放器来播放视频）。除了在网站内部（服务器端）安装这样一个播放器之外，在访客的浏览器上（客户端）还必须安装对应的插件，例如 Flash 插件，甚至还要安装 Quicktime 及 Silverlight 插件，以实现对 .mov 和 .wmv 格式视频的播放支持。
你不觉得这很麻烦吗？正是因为在 HTML5 之前网页上播放视频是如此之困难，所以才导致了网页 Flash 播放器成了收费产品（免费的 JW Player 播放器左下角会显示水印）。而各家播放器的宣传中，也把“支持多种视频格式播放”作为卖点。—— 这给用户也带来了另一种痛苦，当你想要在网页上播放一个视频时，先要考虑你所上传的视频文件格式，是否能被你网站上安装的视频播放器所支持。
什么是 HTML5 Video？
在 HTML5 中，新增了一个标记元素（element），就是 <video> ，这意味着，你可以像之前使用 <img> 标记插入图片那样，在 HTML5 网页中插入视频。
不要小看这个小小的元素。这一点点的改变背后，是一项翻天覆地的变革。有了 <video> 标记，站长不再需要安装任何网页播放器，只需要直接在 video 元素中通过 src 属性给出视频的 URL，就可以了。访客的浏览器上也无需安装任何第三方插件，只要他的浏览器支持 HTML5 标准，就能直接播放这个视频。
这是因为 HTML5 对网页中的视频、音频内容规定了标准接口，只要浏览器支持这种标准，就能直接播放 HTML5 视频或音频。同时，这是一个开放的标准，意味着不会被任何组织或个人操控，其他编程人员可以放心的开发针对 HTML5 video 的控制脚本，以获得增强的功能，例如实现 <video> 元素与网页上其它元素之间的互动等等。
既然 HTML5 视频已经不需要 flash 播放器，那么为什么还能看到名为 HTML5 Video Player 的产品？实际上，号称“HTML5 视频播放器”的，通常只是一个 .js 格式的脚本文件，这种播放器只是为了让你的视频在各个浏览器中播放时，拥有统一的播放器外观（如果直接让浏览器播放，各家浏览器的自带播放器外观是不同的）。你可以不安装这种播放器，你的视频仍然可以在支持 HTML5 的浏览器中播放。
HTML5 视频格式及浏览器支持情况
既然 HTML5 是一种标准，那么，它对视频的要求也有一定的规范。HTML5 <video> 元素要求视频格式只能是下列三种格式之一：mp4，webm，ogg。
不仅如此，HTML5 对视频的编码等技术参数也有要求。请看下表：
| 视频格式 | 编码格式 | 文件扩展名 | MIME 类型 |
| MP4 |
视频流：H264 音频流：AAC |
.mp4 / .m4v | video/mp4 |
| WebM |
视频流：VP8 音频流：Vorbis |
.webm | video/webm |
| Ogg |
视频流：Thedora 音频流：Vorbis |
.ogg / .ogv | video/ogg |
这就是说，你并不能随随便便上传一个视频文件，然后在网页中写一个 <video> 标记，就要求浏览器来播放该视频。如果你的视频格式不符合上述要求，那就根本不会被播放。
在这3种视频格式中，mp4 是比较熟悉的一个字眼。如果你够细心的话，或许已经注意到，Youtube.com 的视频储存格式已经从 FLV 变成了 MP4，这说明他们早就开始支持 HTML5 标准了。如果你要播放的视频格式是其它诸如 AVI 或者 WMV 或者 MOV 或者 ASF 等等，那么，建议你先转换成 mp4 格式（别忘了使用 H264 视频编码及 AAC 音频编码），然后再上传到网站。
下面再来看看哪些浏览器支持 HTML5 视频直接播放：
| 视频格式 |
IE 9+ |
Chrome 6+ |
Firefox 3.6+ |
Safari 5+ |
Opera 10.6+ |
| MP4 | |||||
| WebM | |||||
| Ogg |
从上面的表格可以看出，目前还没有一种 HTML5 视频格式能够被所有浏览器都支持。不过，考虑到“离线播放”（下载后播放）的情况，我建议你选择 MP4 格式，毕竟支持的设备比较多，除了可以在 PC 上播放，你的手机或者 iPad 也能播放。
从上面还可以看出，谷歌的 Chrome 浏览器支持全部的 HTML5 视频格式。因此，如果你担心使用 FireFox 浏览器的访客无法观看你网站上的 MP4 视频的话，就提醒他换用 Chrome 浏览器。
如何将其它格式视频转换成 HTML5 视频格式？
搜索一下“HTML5 视频转换器”，可能会找到很多结果。比如，大家常提到的两款免费而且功能强大的视频转换器“格式工厂”和 HandBrake都支持转换为 H264 编码的 MP4 文件。 另一款被很多人推崇的免费 HTML5 视频转换工具是 Freemake Video Converter。不过，这并不是转换结果最好的，也不是最好用的。
Joomla之门站长经过一番测试比较，最终推荐一款最好用的免费 HTML5 视频转换工具：Easy HTML5 Video。之所以说它最好，是因为：
- Easy HTML5 Video 转换生成的 MP4 文件体积比较小（仅比 Miro Video Converter 的转换结果大一点点）
- Easy HTML5 Video 用法简单，傻瓜式操作：选择源视频，点击“开始”，生成结果。
- 一键生成 HTML5 所需的3种视频文件格式：mp4，webm，ogg。
我用一段 FLV 视频比较了5种转换工具的效果，发现 Miro Video Converter 得到的 mp4 文件体积最小：
| 源文件 | 格式工厂 | Freemake | HandBrake | Easy HTML5 Video | Miro Video Converter |
|
FLV 9.54 MB |
MP4 31.65 MB |
MP4 29.69 MB |
MP4 13.13 MB |
MP4 10.35 MB |
MP4 9.88 MB |
因此，为了使视频加载更快，以及节约服务器的带宽和流量消耗，我建议你选择 Easy HTML5 Video。
使用 Easy HTML5 Video 免费版的唯一不爽就是：它会在转换后的画面右上角添加一个“EasyHtml5Video.com”水印，如下图所示：
 |
| EasyHTML5Video Converter 免费版给画面添加水印 |
如果你不能接受这个水印，那么可以购买其收费版，或者换用免费的 Miro Video Converter，这个软件每次只能生成一种格式，并且只有英文版，无法汉化。
如何在网页中嵌入播放 HTML5 视频？
一段典型的 HTML5 视频标记代码示范：
|
1
2
3
4
5
6
|
<video id=0 controls width=640 height=360>
<source src="path/filename.ogv" type=\'video/ogg; codecs="theora, vorbis"\'/>
<source src="path/filename.webm" type=\'video/webm\' >
<source src="path/filename.mp4" type=\'video/mp4\'>
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
|
从上面示范可以看出，video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。
还有一些技巧例如，对于不支持所链接视频的浏览器提供 Flash 格式播放器兼容（fallback），这里就不赘述了，有兴趣的用户可以自己去搜索教程来学习。
现在总结一下：如果要在你的网页中直接播放 HTML5 视频，操作步骤是：先使用 Easy HTML5 Video 将现有视频转换成 HTML5 要求的 mp4 文件，上传到你网站的媒体保存目录，然后通过上面这样的 video 标记在网页中写入代码。现在用浏览器访问该网页，应该可以看到视频播放窗口了。
本文对于 HTML5 视频的简单介绍到此为止。不过，读者可能有一个新的疑问：那么在 Joomla CMS 中，仍然要通过上述代码来手工插入 HTML5 视频播放窗口吗？很显然这么做太麻烦了。下一篇文章，我们将介绍《如何在 Joomla 网页中嵌入播放 HTML5 视频》。
|