HTML5中的video标签

HTML5在互联网的革新高潮的不断冲刷着新的记录。其中，HTML5最重要的平衡就是在视频方面的支持达到了最佳，也就是说用户不需要安装额外的插件（在PC上或者其它的设备上）来实现视频的播放。随着HTML5标注制定的不断完善，许多的开发人员和设计人员开始关注与实战新的编码标准，原因可能是新的标准缺乏实战和相应的实例示范。本文章将就HTML5视频标签进行一定的解释。

<video>标签VS<object>标签

<object>标签是在页面上仅限嵌套元素的标签，如：audio,video,Java applet,ActiveX,PDF或者Flash等。有一点值得提出的是该标签是比较“灵活”的，例如， 如果你想要在页面上插入一个Flash视频内容，你需要在页面上写上以下代码实现：

<object id=0 type=”application/x-shockwave-flash” data=player_flv_maxi.swf width=420 height=240

<param name=”movie” value=player_flv_maxi.swf />

<param name=”wmode” value=”opaque” />

<param name=”allowFullScreen” value=”true” />

<param name=”allowScriptAccess” value=”sameDomain” />

<param name=”quality” value=”high” />

<param name=”menu” value=”true” />

<param name=”autoplay” value=”false” />

<param name=”autoload” value=”false” />

<param name=”FlashVars” value=”flv=Wildlife.flv&width=420&height=240&autoplay=0&autoload=0&buffer=5&buffermessage=&playercolor=464646&loadingcolor=999898&buttoncolor=ffffff&buttonovercolor=dddcdc&slidercolor=ffffff&sliderovercolor=dddcdc&showvolume=1&showfullscreen=1&playeralpha=100&title=Wildlife.flv&margin=0&buffershowbg=0″ />

要播放这个视频，用户需要在浏览器上安装flash player来进行播放（Google Chrome除外，因为谷歌浏览器在安装是内置的Flash Player）。

Video属性

正如你所看到的，<video>标签应该是和HTML的其它的标签的使用是一样的，在标签开始和结束之间你可以添加你想要添加的多种属性。

其中有些属性是布尔值（boolean），如controls（控制），（loop）循环，（muted）静音等，这些是没有属性的。所以，这些值你只可以设置为“true”或者“false”。

HTML5专家还建议在视频标签下面加入以下代码：

视频不能播放？<a href=”pics/video.mp4″>下载该文件</a>

Controls（控制）

支持HTML5视频标签的浏览器已经内置的视频播放器。其中所有的播放器都内置的标准的控制：播放，暂停，搜索，音量控制。但是，每个浏览器内置的都是自己的播放器样式。其中，Chrome浏览器和IE浏览器比较相近，Firefox,Opera,Safari三个浏览器的样式相近。

如果你想要在不同的浏览器之间实现相同的播放样式，或者不想要设计播放器的样式，你可以创建自己的控制样式：

VideoJS是一个用JS和CSS创建的HTML5视频播放器；

Sublime Video是一个先进的基于云计算的视频播放器；

Projekktor是一个用纯JS创建的开源的HTML5视频播放器，而且在不支持H.264格式的时候转化为FLASH播放；

Tutorial是一个来自Opera开发人员的“如何使用jQuery与CSS3创建自定义的HTML5视频播放器”。

视频资源（Video source）

<video>标签允许同时连接多个<source>元素（一个视频多种格式），例如：

<source src=’movie.webm’ type=’video/webm; codecs=”vp8.0, vorbis”‘/>

<source src=’movie.ogv’ type=’video/ogg; codecs=”theora, vorbis”‘/>

<source src=’movie.mp4′ type=’video/mp4; codecs=”avc1.4D401E, mp4a.40.2″‘/>

正如你所看到的，source标签有2个属性，“src”和“type”。“Type”属性指定MIME类型和一系列的可能的解码，用来帮助浏览器如何解码。默认的情况下，浏览器会使用第一种格式进行解码。目前现代的浏览器至少支持一种HTML5视频格式。

解码（Codecs）

目前距离HTML5解码确定还有一段时间（正在确定），因此，任何一个在HTML5草案中的解码都可能被删除，但是，目前以下的视频解码要求是位于前几位：

1.良好的压缩性、图像质量好，低解码处理需求（低耗处理器）；

2.免费；

3.支持硬件解码。

HTML5视频的3个建议解码格式：H.264, OGG Theora,和WebM VP8。下面是他们的优点与缺点的简述：

H.264：

优点：视频质量高，视频文件小。带宽占用低，低CPU能耗，支持移动设备，而且是免费的（对用户）；

缺点：商业用途的话H.264格式的专利和开发者必须缴纳使用权费用的。

OGG Theora：

优点：免费的解码器（用户和开发人员都是），不用担心VCP3专利（已授权免税担保）。

缺点：文件尺寸比较大，转换工具稀少（很难找到）。

WebM VP8：

优点：2010年Google收购On2（VP8的开发公司）后，发布了该视频解码格式，并且是开源免费的。

缺点：尽管Google方面宣称WebM具有最高的视频质量，但是，最新的消息显示WebM与 H.264格式的质量方面是不相上下的，但是最主要的问题是转化为WebM格式的工具是少之又少。

毋庸置疑，HTML5视频与Flash相比之下是有很多的优势的。然而，H.264, WebM 与 Theora OGG这3种格式哪种会成为默认的格式目前还是未知的，由于HTML5视频格式很多方面是取决于Microsoft（微软）与Google（谷歌）两家公司，新的标准很不确定，但是目前还在稳步进行着。