<video>元素
<video>
元素使可以非常轻松地嵌入视频。一个非常简单的示例如下所示:
<video src="rabbit320.webm" controls>
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
</video>
注释的特征是:
-
src
与<img>
元素相同,src
(source)属性包含您要嵌入的视频的路径。它的工作方式完全相同。 -
controls
用户必须能够控制视频和音频的播放人尤其重要 。必须使用该controls
属性来包含浏览器自己的控制界面。
提高兼容性
<video controls>
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>
在这里,我们src
从实际<video>
标签中删除了该属性,而是包含<source>
了指向其自身来源的单独元素。在这种情况下,浏览器将浏览<source>
元素并播放它具有编解码器支持的第一个元素。如今,包括WebM和MP4源应该足以在大多数平台和浏览器上播放视频。
其他<video>功能
<video controls width="400" height="400"
autoplay loop muted
poster="poster.png">
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>
新功能包括:
-
width
和height
控制视频大小。 -
autoplay
视频自动播放。 -
loop
视频循环播放。 -
muted
默认关闭声音播放。 -
poster
视频播放前显示的URL,用于初始屏幕或者广告屏幕。 -
preload
用于缓冲大文件;它可以采用以下三个值之一:
1. "none" 不缓冲文件
2. "auto" 缓冲媒体文件
3. "metadata" 仅缓冲文件的元数据