在html中嵌入视频播放器最常用的是HTML5提供的原生video标签，它不需要依赖第三方插件就能实现基础的视频播放、暂停、音量调节等功能，兼容大部分现代浏览器，是网页嵌入视频的首选方案。
使用原生video标签嵌入基础视频
video标签是HTML5新增的多媒体标签，直接将视频文件路径赋值给src属性就能实现视频嵌入，基础用法如下：
<!-- 基础视频嵌入示例 --> <video src="video/demo.mp4" controls> 您的浏览器不支持video标签，无法播放视频 </video>
上面代码中的controls属性会显示浏览器自带的播放控制栏，包含播放暂停按钮、进度条、音量调节等组件。如果浏览器不支持video标签，会显示标签内部的提示文本。
video标签常用属性说明
除了src和controls，video标签还有很多实用属性，可以根据需求灵活配置：
| 属性名 | 作用说明 |
|---|---|
| autoplay | 页面加载完成后自动播放视频，多数浏览器要求同时设置muted属性才能生效 |
| loop | 视频播放结束后自动重新开始播放 |
| muted | 默认静音播放视频 |
| width、height | 设置视频播放器的显示宽度和高度，单位默认为像素 |
| poster | 设置视频未播放时显示的封面图片路径 |
| preload | 设置视频预加载策略，可选值有none（不预加载）、metadata（只预加载元数据）、auto（预加载整个视频） |
多视频格式兼容处理
不同浏览器支持视频格式存在差异，比如部分浏览器不支持MP4的某些编码格式，为了保证所有用户都能正常播放，可以使用source标签提供多种格式的视频源：
<video controls width="800" poster="img/video_cover.jpg"> <source src="video/demo.mp4" type="video/mp4"> <source src="video/demo.webm" type="video/webm"> <source src="video/demo.ogg" type="video/ogg"> 您的浏览器不支持video标签，无法播放视频 </video>
浏览器会按照source标签的顺序依次尝试加载，找到第一个支持格式的视频就会停止尝试，这样能最大程度覆盖不同浏览器的兼容需求。
自定义视频播放控制逻辑
如果不需要浏览器自带的控制栏，可以隐藏默认controls，通过JavaScript实现自定义控制功能，示例如下：
<!-- 隐藏默认控制栏的视频 -->
<video id="myVideo" src="video/demo.mp4" width="800"></video>
<div class="custom-controls">
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>
<input type="range" id="volumeRange" min="0" max="1" step="0.1" value="1">
</div>
<script>
const video = document.getElementById('myVideo');
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const volumeRange = document.getElementById('volumeRange');
// 播放按钮点击事件
playBtn.addEventListener('click', () => {
video.play();
});
// 暂停按钮点击事件
pauseBtn.addEventListener('click', () => {
video.pause();
});
// 音量调节事件
volumeRange.addEventListener('input', (e) => {
video.volume = e.target.value;
});
</script>
注意事项
- 视频文件体积不宜过大，建议提前压缩视频，避免页面加载过慢影响用户体验
- 移动端浏览器通常禁止自动播放带声音的视频，需要自动播放的话必须同时设置autoplay和muted属性
- 如果视频需要跨域访问，需要服务端配置对应的跨域资源共享规则，否则可能出现无法加载的问题
HTML视频嵌入HTML5_video前端开发多媒体播放修改时间：2026-06-27 14:18:27