HTML5 视频

HTML5视频

在网页中显示视频一直都没有统一的标准，网页中的视频播放一般都是通过外部@L_696_1@（如flash）实现的。因此为了让浏览器能够播放视频，我们必须去下载对应@L_696_1@安装才可以，下载完浏览器还要去装flash@L_696_1@才能看电影，我其实是拒绝的。而现在，我再也不用吐槽这一点了，因为HTML5提供了展示视频的标准，能够通过 <video> 标签来在网页中展示视频。

<video> 标签对于浏览器的兼容性尚可，目前 IE8 及其更早版本不支持这个标签，其他主流浏览器基本支持。

<video> 标签并不能支持所有格式的视频，下面是它的视频格式支持情况及相应的浏览器支持情况：

@H_703_40@mPEG 4

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

有人不仅会发问：难道<video>标签只支持三种格式的视频文件？
并非如此，实际情况是这样的：
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

如何理解呢？我们需要理解编码格式和封装格式的区别，比如MPEG 4指的是编码格式，而MP4
指的是封装格式。这就好像现在的浏览器有很多种，内核也有很多种，不同的浏览器内核就相当于不同的编码格式，而不同的浏览器就是封装格式的不同。chrome、opera、ie等都可以采用相同的内核（只是举例，现实情况自然不是如此），这就是不同的封装格式使用相同的编码格式；而chrome本身也可以采用不同的内核，生成不@R_525_11197@的chrome，这是同@L_944_23@封装格式使用不同的编码格式。二者之间完全可以是多对多的关系，并没有多大的联系。因此，满足上述编码格式的mp4、avi、wav等等封装格式的文件都是支持的，这一点是值得注意的地方。

<video> 标签具有哪些属性呢？

属性	值	描述
autoplay	autoplay	如果定义了该属性，则视频在就绪后立刻播放
controls	controls	提供播放，暂停，音量控件
height	pixels@H_944_132@	定义播放器的高度
width	pixels@H_944_132@	定义播放器的宽度
loop	loop	如果定义了该属性，则视频会循环播放
src	url@H_944_132@	需要播放的视频的URL
preload	preload	如果定义了该属性，则视频在页面加载时进行加载，并预备播放。 如果定义了 autoplay 属性，则忽略此属性.
poster	url@H_944_132@	定义视频下载时显示的图像，或者说是用户点击播放之前的显示图像

举个例子：

<video src='/01.mp4' controls='controls' width='100' height='100' loop='loop'
 poster='cover.png'>您使用的浏览器不支持video元素</video>

上面的浏览器的显示效果是这样的。

<video>...</video>的中间内容部分是当你使用的浏览器不支持该标签时才会显示出来的提示文本。

现在还有@L_944_23@问题，<video> 标签对视频格式的支持也不是很完善，不同的浏览器对不同格式的支持也不尽相同。这样很容易出现在某个浏览器上可以播放，而在另@L_944_23@浏览器上播放不了的情况。当然，最好的解决方案是促进各浏览器的支持，但是这不是HTML5的工作。HTML5还能通过另外一种方式提高兼容性，那就是提供同一视频的多个文件格式，具体例子如下：

<video>
    <@R_944_9016@e src='01.ogg' type='video/ogg'>
    <@R_944_9016@e src='01.mp4' type='video/mp4'>
</video>

<video> 元素可以使用多个<@R_944_9016@e> 元素，浏览器将使用第@L_944_23@可识别的格式。

HTML中的 video 元素也可以使用DOM进行控制，它也具有方法、事件和属性，我们可以在js中调用它们。

方法	描述
play()	方法描述：播放方法 参数：无返回值：无
pause()	方法描述：暂停方法 参数：无返回值：无
load()	方法描述：重新载入视频方法（通常当视频源发生改变时或者其他原因调用） 参数：无 返回值：无
canPlayType(typE)	方法描述：检查浏览器是否支持播放指定格式的视频 参数：需要提供@L_944_23@字符串类型的参数，该参数指定需要测试的视频类型和编码格式（编码格式是可选项）。 常用的参数值： video/oggvideo/mp4video/webm 常用的包含指定编码格式的参数值： video/ogg;codecs=”theora,vorbis”video/mp4;codecs=”avc1.4D401E,mp4a.40.2”video/webm; codecs=”vp8.0,vorbis” 返回值：返回值是@L_944_23@字符串，代表了可以支持的可能性 “probably” - 很有可能支持”maybe” - 也许支持”” - （空字符串）不支持 注意：根据W3C的说法，当指定的参数包含编码格式的检测时，返回值只会是”probably”

@H_703_40@muted

属性	描述
currentSrc	当前视频的完整URL，没有则返回空字符串
currentTime	可以设置或者返回当前视频正在播放的时间点（秒为单位）
videoWidth	返回视频的内在尺寸中的宽度（如果视频元素还没准备好则返回0）
videoHeight	返回视频的内在尺寸中的高度（如果视频元素还没准备好则返回0）
duration	返回视频的总时长（秒为单位）
ended	视频播放结束后的事件
error
paused	返回视频当前是不是处于暂停状态
返回或者设置当前视频是否静音
seeking	返回用户是否正在寻找视频
volume	音量
height	返回显示视频的高度
width	返回显示视频的宽度

注意：只有videoWidth 和 videoHeight属性是可以立即使用。视频元数据加载后，其他属性才可以使用。

事件	描述
play	视频开始播放时触发
pause	视频暂停时触发
progress	浏览器准备下载指定video资源的时候触发
error	加载资源出错的时候触发
timeupdate	当播放的时间点发生改变的时候触发
ended	当视频播放结束的时候触发
abort	当资源加载中断的时候触发
empty	加载资源为空的时候触发
emptied	当前的播放列表为空时触发
waiTing	当视频因为需要停止去缓冲下一帧时触发
loadedMetadata	当浏览器已经加载完了指定资源时候触发

以上并非HTML5 <video> 标签方法、事件、属性的完整列表。关于HTML <video> 标签的介绍大致于此，不得不说，如果能够提升它的兼容性，以及个性化配置，或者说统一浏览器端视频显示的标准，那么对于网页显示视频来说将会变得非常方便。
更多详细的属性参考HTML5 视频/音频参考手册。