HTML5视频元素通过指定视频文件的位置,告诉浏览器从其他来源加载视频文件,类似于浏览器加载图像文件的方式(图像本身并不存储在HTML文件中——浏览器从其他地方提取)。
还可以包括宽度、高度和其他属性,告诉浏览器如何显示视频。其他标记代码可以告诉浏览器它在页面上的位置。
HTML5的视频标签是<video>,该标签与其他HTML元素类似,用</video>关闭。
在这些标签之间,一个 "source" 标签表示视频文件的位置。在这个标签中,视频源(src)和文件类型(type)都是这样表示的:
<video>
<source src="example.mp4" type="video/mp4">
</video>
还有一些控制的组件:
- 宽度:这指定了视频的宽度,单位是像素。像素的数量在引号之间:width="370"
- 高度:这指定了视频的高度。它的作用与宽度属性类似。
- 播放、暂停、音量:这些控件使用户能够控制视频播放。将控件添加到video标签中以包括它们。
视频的备用来源也可以放在video标签之间,以防浏览器不支持第一个文件格式。浏览器总是使用列出的第一个来源。
此外,文本可以放在 video 标签之间;只有当用户的浏览器不支持HTML5视频时,才会显示这个文本。
把这一切放在一起,嵌入视频的HTML5代码可能看起来像这样:
<video controls width="370" height="130">
<source src="example.mp4" type="video/mp4">
<source src="alternate-example.webm" type="video/webm">
Your browser does not support HTML5 video.
</video>
其他一些属性,如自动播放(在页面加载时立即播放视频)、循环(循环视频)、静音(使视频静音)和海报(在视频加载前显示图像),也可以在视频元素中使用。Mozilla有关于这些属性的良好文档。