W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

HTML5 视频



HTML视频实例。 Courtesy of Big Buck Bunny.

尝试一下 »


在HTML中播放视频

在HTML5之前,没有在网页上显示视频的标准。

在HTML5之前,视频只能用插件(如Flash)播放。

HTML5 <video> 元素指定了在网页中嵌入视频的标准方法


浏览器支持

表中的数字是指定第一个完全支持 <video> 元素的浏览器版本。

元素
<video> 4.0 12.0 9.0 3.5 4.0 10.5

HTML <video> 元素

在HTML中显示视频使用 <video> 元素:

Example

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
尝试一下 »

如何工作

<video> 元素提供了播放、暂停和音量控件来 控制 视频。

同时 <video> 元素元素也提供了 widthheight 属性控制视频的尺寸。

如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。

<video> 与 </video> 标签之间插入的内容是提供给不支持 <video> 元素的浏览器显示的。

多个 <source> 元素可以链接不同的视频文件,浏览器将使用第一个可识别的格式:


HTML <video> 自动播放

开始让视频自动播放请使用 autoplay 属性:

Example

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
尝试一下 »
Note 自动播放属性在移动设备(如iPhone和iPad)无效。

视频格式与浏览器支持

当前,<video> 元素支持三种视频格式:MP4,WebM 和 Ogg:

浏览器 MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (from Opera 25) YES YES

视频格式

格式 Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML Video - 方法,属性和事件

HTML5 defines DOM methods, properties, and events for the <video> element.

This allows you to load, play, and pause videos, as well as setting duration and volume.

There are also DOM events that can notify you when a video begins to play, is paused, etc.

Example: Using JavaScript




Video courtesy of Big Buck Bunny.

尝试一下 »

更多参考请查看HTML5 Audio/Video DOM 参考手册


HTML5 Video 标签

标签 描述
<video> 定义一个视频
<source> 定义多种媒体资源,比如 <video> 和 <audio>
<track> 定义在媒体播放器文本轨迹