demo
<html>
<head>
<title>Hello,kitty</title>
</head>
<body>
<video src="D:\迅雷下载\圣杯神器:骸骨之城.mp4" width="1920" height="1080" autoplay="autoplay">
Your browser does not support the video tag.
</video>
</body>
</html>
视频格式
当前,video 元素支持三种视频格式:
格式 | IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Internet Explorer
Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。
<video> 标签的属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
preload | preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
实例
设置为自动播放的 video 元素:
<video controls="controls" autoplay="autoplay"
>
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
定义和用法
autoplay 属性规定一旦视频就绪马上开始播放。
如果设置了该属性,视频将自动播放。
HTML 4.01 与 HTML 5 之间的差异
autoplay 属性是 HTML 5 中的新属性。
语法
<video autoplay="autoplay" />
实例
带有浏览器默认控件的 video 元素:
<video controls="controls"
controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
定义和用法
controls 属性规定浏览器应该为视频提供播放控件。
如果设置了该属性,则规定不存在作者设置的脚本控件。
浏览器控件应该包括:
- 播放
- 暂停
- 定位
- 音量
- 全屏切换
- 字幕(如果可用)
- 音轨(如果可用)
HTML 4.01 与 HTML 5 之间的差异
controls 属性是 HTML 5 中的新属性。
语法
<video controls="controls" />
实例
设置为循环播放的 video 元素:
<video controls="controls" loop="loop"
>
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
定义和用法
loop 属性规定当视频结束后将重新开始播放。
如果设置该属性,则视频将循环播放。
HTML 4.01 与 HTML 5 之间的差异
loop 属性是 HTML 5 中的新属性。
语法
<video loop="loop" />
实例
设置为预加载的 video 元素:
<video controls="controls" preload="auto"
>
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
定义和用法
preload 属性规定是否在页面加载后载入视频。
如果设置了 autoplay 属性,则忽略该属性。
HTML 4.01 与 HTML 5 之间的差异
preload 属性是 HTML 5 中的新属性。
语法
<video preload="load" />属性值
值 | 描述 |
---|---|
load | 规定是否预加载视频。 可能的值:
|
实例
一个视频播放器:
<video controls="controls" src="movie.ogg"
>
Your browser does not support the video tag.
</video>
HTML 4.01 与 HTML 5 之间的差异
src 属性是 HTML 5 中的新属性。
语法
<video src="URL">
属性值
值 | 描述 |
---|---|
URL | 视频文件的 URL。 可能的值:
|