HTML <video> 标签

HTML <video> 元素用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。

实例

<!DOCTYPE html>
<html>
<body>
<h1>video 元素</h1>
<video width="320" height="240" controls>
  <source src="/example/video/demo.mp4" type="video/mp4">
  <source src="/example/video/demo.ogv" type="video/ogv">
  您的浏览器不支持 video 标签。
</video>
</body>
</html>

运行一下

定义和用法

<video> 标签定义视频，比如电影片段或其他视频流。

注意事项：

如果你没有指定 controls 属性，那么视频不会展示浏览器自带的控件，你也可以用 JavaScript 和 HTMLMediaElement API 来创建你自己的控件。
HTMLMediaElement 会激活许多不同的事件，以便于让你可以控制视频（和音频）内容。
你可以用CSS 属性 object-position 来调整视频在元素内部的位置，它可以控制视频尺寸适应于元素外框的方式。
如果想在视频里展示字幕或者标题，你可以在 <track> 元素和 WebVTT 格式的基础上使用 JavaScript 来实现。

浏览器支持

元素
<video>	4.0	9.0	3.5	3.1	11.5

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。

注释：Internet Explorer 8 以及更早的版本不支持 <video> 标签。

浏览器对视频格式的支持

Browser	MP4	WebM	Ogg
Edge	YES	YES	YES
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

浏览器并不是都支持相同的视频格式，所以你可以在 <source> 元素里提供多个视频源，然后浏览器将会使用它所支持的第一个源。

HTML 4.01 与 HTML 5 之间的差异

<video> 标签是 HTML 5 的新标签。

提示和注释

提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

属性

HTML5 中的新属性。

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

全局属性

<video> 标签支持 HTML 中的全局属性。

事件属性

<video> 标签支持 HTML 中的事件属性。