HTML <video> 标签
定义和用法
<video> 标签定义视频,比如电影片段或其他视频流。
HTML 4.01 与 HTML 5 之间的差异
<video> 标签是 HTML 5 的新标签。
提示和注释
提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。
<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>
HTML <video> autoplay 属性
设置为自动播放的 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 <video> controls 属性
带有浏览器默认控件的 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 <video> height 属性
具有指定高度和宽度的视频:
<video width="320" height="240" 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>
定义和用法
height 属性指定视频播放器的高度。
提示:规定视频的高度和宽度是一个好习惯。如果设置这些属性,在页面加载时会为视频预留出空间。如果没有设置这些属性,那么浏览器就无法预先确定视频的尺寸,这样就无法为视频保留合适的空间。结果是,在页面加载的过程中,其布局也会产生变化。
提示:请勿通过 height 和 width 属性来缩放视频!通过 height 和 width 属性来缩小视频,只会迫使用户下载原始的视频(即使在页面上它看起来较小)。正确的方法是在网页上使用该视频前,使用软件对视频进行压缩。
HTML <video> loop 属性
设置为循环播放的 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 <video> muted 属性
被静音的视频:
<video controls muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
定义和用法
muted 属性属于逻辑属性。
当设置该属性后,它规定视频的音频输出应该被静音。
HTML <video> poster 属性
带有预览图(海报图片)的视频播放器:
<video controls poster="/images/w3school.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
定义和用法
poster 属性规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
如果未设置该属性,则使用视频的第一帧来代替。
HTML <video> preload 属性
设置为预加载的 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 <video> src 属性
一个视频播放器:
<video controls="controls" src="movie.ogg">
Your browser does not support the video tag.
</video>
定义和用法
src 属性规定要播放的视频的 URL。
也可以使用 <source> 标签 来设置视频。
HTML <video> width 属性
具有指定高度和宽度的视频:
<video width="320" height="240" 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>
定义和用法
width 属性指定视频播放器的宽度。
提示:规定视频的高度和宽度是一个好习惯。如果设置这些属性,在页面加载时会为视频预留出空间。如果没有设置这些属性,那么浏览器就无法预先确定视频的尺寸,这样就无法为视频保留合适的空间。结果是,在页面加载的过程中,其布局也会产生变化。
提示:请勿通过 height 和 width 属性来缩放视频!通过 height 和 width 属性来缩小视频,只会迫使用户下载原始的视频(即使在页面上它看起来较小)。正确的方法是在网页上使用该视频前,使用软件对视频进行压缩。