轻松上手,快乐学习!

HTML 视频


HTML <video> 元素用于在网页上显示视频。


实例

Big Buck Bunny 提供:

亲自试一试 »

HTML <video> 元素

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

实例

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 视频标签。
</video>
亲自试一试 »

工作原理

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

最好始终包含宽度 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">
您的浏览器不支持 video 视频标签。
</video>
亲自试一试 »

自动播放属性在 iPad 和 iPhone 等移动设备中不起作用。


浏览器支持

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

元素
<video> 4.0 9.0 3.5 4.0 10.5

HTML Video 视频格式

有三种支持的视频格式:MP4、WebM和Ogg。浏览器对不同格式的支持是:

浏览器 MP4 WebM Ogg
Edge YES YES YES
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

HTML Video - 媒体类型

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

HTML Video - 方法、属性和事件

HTML <video> 定义元素的方法、属性和事件。

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

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

实例: 使用 JavaScript




视频由 Big Buck Bunny 提供。

亲自试一试 »

有关完整的DOM参考,请转到 HTML Audio/Video DOM 参考手册。


HTML Video 标签

标签 描述
<video> 定义视频或电影
<source> 为媒体元素定义多个媒体资源,例如 <video> 和 <audio>
<track> 定义媒体播放器中的文本曲目