使用HTML5的video标签可直接在网页嵌入视频,语法为,支持mp4、webm、ogg等格式,通过标签提供多格式兼容,常用属性包括controls、autoplay、loop、muted、preload及宽高设置,可添加备用提示文本并用CSS优化样式,提升跨浏览器体验。

在网页中嵌入视频,HTML5 提供了简单高效的 video 标签,无需依赖 Flash 或其他插件。使用它可以在现代浏览器中直接播放视频文件,提升用户体验。
基本语法:使用 video 标签
要嵌入一个视频,只需使用 标签,并通过 src 属性指定视频文件的路径:
其中,controls 属性用于显示播放、暂停、音量等控制按钮,用户可以直接操作视频。
支持的视频格式与兼容性
不同浏览器对视频格式的支持略有差异,常见的格式包括:
立即学习“前端免费学习笔记(深入)”;
- MP4 (H.264):广泛支持,推荐首选
- WebM:开源格式,Chrome、Firefox 支持良好
- OGG/OGV:主要用于 Firefox 和旧版 Opera
为确保兼容性,建议提供多个源文件:
浏览器会按顺序尝试加载第一个能识别的格式。
常用属性设置
除了 controls,video 标签还支持多个实用属性:
- autoplay:视频自动播放(部分浏览器限制静音下才可自动播放)
- loop:循环播放
- muted:静音播放(常配合 autoplay 使用)
- preload:控制预加载行为,可选值:auto、metadata、none
- width 和 height:设置视频尺寸
示例:
添加备用内容与样式优化
在 标签内添加文本内容,可在不支持的浏览器中提示用户:
也可以使用 CSS 控制视频样式,例如居中、响应式布局:
video {display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
基本上就这些。掌握 video 标签的基本用法后,你就能轻松在网页中嵌入并控制视频播放,适配大多数设备和浏览器。










