主题
插入视频
HTML 使用 <video> 标签来在网页中插入和播放本地或网络视频,为用户提供更丰富的多媒体体验。
基本语法
html
<video src="video.mp4" controls></video>src:视频文件路径(可为本地或网络地址)controls:显示播放控件(播放、暂停、音量等)
常用属性
autoplay:页面加载后自动播放(通常需配合muted才能生效)loop:循环播放muted:静音播放poster:设置视频封面图片width和height:设置视频尺寸
示例
html
<video
src="video.mp4"
width="640"
height="360"
controls
poster="thumbnail.jpg"
></video>多格式兼容(推荐方式)
为了兼容不同浏览器,可以使用多个 <source> 标签:
html
<video controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
您的浏览器不支持视频播放。
</video>视频格式支持
常见的视频格式及兼容性:
| 格式 | 类型 | 支持浏览器 |
|---|---|---|
| MP4 | video/mp4 | 全面支持 |
| WebM | video/webm | Chrome、Firefox 等 |
| Ogg | video/ogg | 部分浏览器支持 |
通过 <video> 标签嵌入视频,不仅提升网页的表现力,也让内容更加生动直观,广泛应用于课程演示、产品介绍、新闻播放等场景。