HTML5 视频(Video)


HTML视频示例

运行 »

以HTML形式播放视频

在HTML5之前,视频只能在带插件的浏览器中播放(如Flash).

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


浏览器支持

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

元素(Element)




<video> 4.0 9.0 3.5 4.0 10.5

HTML <video> 元素

要以HTML格式显示视频,请使用<video>元素:

实例

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持HTML5视频.
</video>
运行 »


HTML5 (视频)- 如何工作

controls属性添加视频控件,如播放,暂停和音量.

video元素包含widthheight 属性.如果未设置高度和宽度,则视频加载时页面可能会闪烁.

<source>元素允许您指定浏览器可以选择的备用视频文件.浏览器将使用第一种识别的格式.

<video></video>标记之间的文本仅显示在不支持 <video>元素的浏览器中.


HTML <video>自动播放

要自动启动视频,请使用autoplay属性:

实例

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持HTML5视频.
</video>
运行 »

autoplay属性在iPad和iPhone等移动设备中不起作用.


HTML video(视频) - 浏览器支持

在HTML5中,支持的视频格式有3种:MP4,WebM和Ogg.

浏览器对不同格式的支持是:

浏览器(Browser) 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)

HTML视频 - 媒体类型

文件格式 媒体类型
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML视频 - 方法,属性和事件

HTML5为<video>元素定义DOM方法,属性和事件.

这允许您加载,播放和暂停视频,以及设置持续时间和音量.

还有一些DOM事件可以在视频开始播放,暂停等时通知您.

示例:使用JavaScript




运行 »

有关完整的DOM参考,请转到我们的 HTML5音频/视频 DOM参考.


HTML5视频标签

标签(Tag) 描述(Description)
<video> 定义一个视频或者影片
<source> 定义了media元素的多媒体资源 <video> 和 <audio>
<track> 规定media元素的字幕文件或其他包含文本的文件