<video> 标签
-
主要容器:用于定义视频播放器的主要容器
-
控制属性:包含控制视频播放的属性(controls、autoplay、loop等)
-
后备内容:在标签内可以放置后备文本(当浏览器不支持video标签时显示)
<source> 标签
-
指定源文件:用于指定视频文件的实际路径
-
多格式支持:可以包含多个source标签,让浏览器选择支持的格式
-
属性 :主要包含
src(文件路径)和type(MIME类型)
示例代码:
<video controls width="600">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
您的浏览器不支持HTML5视频标签
</video>
主要区别:
| 特性 | <video> |
<source> |
|---|---|---|
| 作用 | 视频播放器容器 | 视频源文件定义 |
| 位置 | 必须的根元素 | 必须放在 <video> 或 <audio> 内部 |
| 数量 | 一个视频一个 | 一个视频可以有多个(用于不同格式) |
| 属性 | 控制播放器外观和行为 | 指定文件路径和类型 |
| 独立性 | 可以独立使用(有src属性时) | 不能独立使用 |
使用场景:
使用多个<source>标签是最佳实践,因为它能确保视频在不同浏览器中的兼容性。
-
单个源文件:
<video src="video.mp4" controls></video> -
多个源文件(推荐):
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> </video>注意事项:
-
当使用多个
<source>时,浏览器会按顺序尝试,直到找到支持的格式 -
type属性帮助浏览器判断是否支持该格式,避免不必要的下载 -
<video>也可以直接使用src属性,但这样不支持多格式备选