HTML5之视频功能HTML5之视频功能

直到现在，仍然不存在一项旨在网页上显示视频的标准。

今天，大多数视频是通过插件（比如 flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

html5 规定了一种通过 video 元素来包含视频的标准方法。

当前，video 元素支持三种视频格式：

格式

ie

firefox

opera

chrome

safari

ogg

no

3.5+

10.5+

5.0+

mpeg 4

9.0+

3.0+

webm

4.0+

10.6+

6.0+

注：

ogg = 带有 theora 视频编码和 vorbis 音频编码的 ogg 文件

mpeg4 = 带有 h.264 视频编码和 aac 音频编码的 mpeg 4 文件

webm = 带有 vp8 视频编码和 vorbis 音频编码的 webm 文件

如需在 html5 中显示视频，所需要的是：

其中，src="movie.ogg" 指视频的本地地址；controls="controls" 指control 属性，供添加播放、暂停和音量控件。

若想制定视频的宽度和高度，<video>与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的，则：

上面的例子使用一个 ogg文件，适用于firefox、opera 以及 chrome 浏览器。

要确保适用于 safari浏览器，视频文件必须是 mpeg4 类型。

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

注：internetexplorer 8 不支持 video 元素。在 ie 9 中，将提供对使用 mpeg4 的 video 元素的支持。

属性

值

描述

<a target="_blank" href="http://www.jb51.net/w3school/html5/att_video_autoplay.htm">autoplay</a>

autoplay

如果出现该属性，则视频在就绪后马上播放。

<a target="_blank" href="http://www.jb51.net/w3school/html5/att_video_controls.htm">controls</a>

controls

如果出现该属性，则向用户显示控件，比如播放按钮。

<a target="_blank" href="http://www.jb51.net/w3school/html5/att_video_height.htm">height</a>

pixels

设置视频播放器的高度。

<a target="_blank" href="http://www.jb51.net/w3school/html5/att_video_loop.htm">loop</a>

loop

如果出现该属性，则当媒介文件完成播放后再次开始播放。

<a target="_blank" href="http://www.jb51.net/w3school/html5/att_video_preload.htm">preload</a>

preload

如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

<a target="_blank" href="http://www.jb51.net/w3school/html5/att_video_src.htm">src</a>

url

要播放的视频的 url。

<a target="_blank" href="http://www.jb51.net/w3school/html5/att_video_width.htm">width</a>

设置视频播放器的宽度。

html5 &lt;video&gt; 元素同样拥有方法、属性和事件。

其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 dom 事件能够通知您，比方说，&lt;video&gt; 元素开始播放、已暂停，已停止，等等。

下例中简单的方法，向我们演示了如何使用 &lt;video&gt; 元素，读取并设置属性，以及如何调用方法。

上面的例子调用了两个方法：play()和 pause()。它同时使用了两个属性：paused 和 width。

运行效果如下图：

下面列出了大多数浏览器支持的视频方法、属性和事件：

方法

事件

play()

currentsrc

play

pause()

currenttime

pause

load()

videowidth

progress

canplaytype

videoheight

error

duration

timeupdate

ended

abort

paused

empty

muted

emptied

seeking

waiting

volume

loadedmetadata

height

width

注释：在所有属性中，只有videowidth 和 videoheight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。