在网页开发过程中，嵌入MP4格式视频是非常常见的需求，不需要复杂的插件，利用HTML5原生的video标签就能快速实现。下面我们来看具体的实现方法和配置细节。
一、video标签基础用法
HTML5提供的<video>标签是播放MP4视频的核心，最基础的用法如下：
<video src="video.mp4" controls> 您的浏览器不支持video标签，无法播放视频 </video>
上面的代码中，src属性指定MP4视频文件的路径，controls属性会在页面上显示播放、暂停、音量调节等默认控制面板。如果浏览器不支持<video>标签，就会显示标签内部的提示文本。
二、常用属性配置
除了基础的src和controls，video标签还有很多实用的属性可以配置，满足不同的播放需求：
- autoplay：页面加载完成后自动播放视频，部分浏览器为了用户体验会限制自动播放，通常需要配合muted属性使用
- muted：默认静音播放视频
- loop：视频播放结束后自动重新播放
- width/height：设置视频播放区域的宽度和高度，单位是像素
- poster：视频未播放时显示的封面图片路径
- preload：设置视频预加载策略，可选值有none（不预加载）、metadata（只预加载元数据）、auto（尽可能预加载）
下面是包含多个属性配置的完整示例：
<video src="video.mp4" controls width="800" height="450" poster="cover.jpg" preload="metadata" muted > 您的浏览器不支持video标签，无法播放视频 </video>
三、多格式兼容配置
虽然大部分现代浏览器都支持MP4格式，但为了覆盖更多用户场景，可以配置多种视频格式作为备选，浏览器会自动选择第一个支持的格式播放：
<video controls width="800" height="450" poster="cover.jpg"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogg" type="video/ogg"> 您的浏览器不支持video标签，无法播放视频 </video>
这里通过<source>标签指定多个视频源，type属性标明视频的MIME类型，浏览器会按顺序检测，直到找到可以播放的格式。
四、自动播放的兼容处理
现在很多浏览器都禁止带有声音的视频自动播放，所以如果想要实现自动播放效果，需要同时添加autoplay和muted属性，示例代码如下：
<video src="video.mp4" autoplay muted loop controls> 您的浏览器不支持video标签，无法播放视频 </video>
如果需要用户点击后开启声音，可以通过JavaScript控制，示例代码如下：
// 获取video元素
const video = document.querySelector('video');
// 点击播放区域时取消静音
video.addEventListener('click', function() {
if (this.muted) {
this.muted = false; // 取消静音
this.play(); // 继续播放
}
});五、常见问题排查
如果遇到MP4视频无法播放的情况，可以从以下几个方面排查：
| 问题现象 | 可能原因 | 解决方法 |
|---|---|---|
| 视频区域显示但无法播放 | 视频编码格式不支持 | 将MP4视频转码为H.264编码+AAC音频的格式，这是兼容性最好的MP4编码组合 |
| 视频路径正确但加载失败 | 服务器未配置正确的MIME类型 | 在服务器配置中添加video/mp4的MIME类型映射 |
| 自动播放不生效 | 未添加muted属性 | 给video标签添加muted属性，或者在用户交互后再触发播放 |
只要按照上面的步骤配置，就可以在HTML页面中稳定播放MP4格式的视频了，大部分场景下基础的video标签配置就能满足需求，不需要额外的第三方库支持。
HTML_videoMP4_video_playbackvideo_tag_configurationHTML5_media修改时间：2026-05-25 10:56:23