HTML5学习笔记 视频

许多时髦的网站都提供视频。html5提供了展示视频的标准

检测您的浏览器是否支持html5视频

Web上的视频

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

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

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

视频格式

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

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

Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件

MPEG4=带有H.264视频编码和AAC音频编码的MPEG4文件

WebM=带有VP8视频编码和Vorbis音频编码的WebM文件。

视频格式

mp4                          dideo/mp4

WebM　　　　　　　　 video/webm

Ogg　　　　　　　　　 video/ogg

 

如何工作

如需在html5中显示视频，您所有需要的是:

<video src="movie.ogg" controls="controls">
</video>

control属性供添加播放、暂停和音量控件。

包含宽度和高度属性也是不错的主意。

video与video之间插入的内容是供不支持video元素的浏览器显示的：

实例

<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

 

使用DOM进行控制

html5<video>和<audio>元素同样拥有方法，属性和事件

<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.

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