HTML<video>元素

在HTML中播放视频,用<video>标签:

<video width="320" height="240" controls>
  <source src="/public/videos/mov_bbb.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
你的浏览器不支持video标签.
</video>

它是怎么工作的?

controls属性添加视频控制,例如：播放,停止和音量.

要记得给视频指定宽度和高度属性,这是一个好习惯.

如果高度和宽度不指定,那么浏览器将不知道视频的尺寸.当视频加载的时候页面会闪烁.

<video>和</video>标签之间的文字只在浏览器不支持<video>元素时显示.

多个<srouce>元素可以连接到不同的视频文件.浏览器将用第一个能识别的视频格式.

HTML <video>自动播放

要让视频自动播放用autoplay属性:

<video width="320" height="240" autoplay>
  <source src="/public/videos/mov_bbb.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
你的浏览器不支持视频标签.
</video>

autoplay属性可能在移动设备上不能工作,例如:iPad和iPhone.

HTML 视频 - 浏览器支持

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

HTML Video - 媒体类型

HTML Video - 方法,属性和事件

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

这允许你加载,播放和暂停视频,此外还有设置播放时间和音量.

还有一些DOM事件,当你开始播放视频时会提示你,还有暂停等等.

完整的DOM参考文档,到我们的HTML5 音频/视频 DOM参考.

HTML5 视频标签