在网页开发中，使用video标签实现视频自动播放并同时播放声音，需要同时符合浏览器的自动播放策略和正确的属性配置，否则很容易出现自动播放失败或者只有画面没有声音的情况。
浏览器自动播放策略说明
目前主流浏览器为了防止页面突然发出声音打扰用户，对媒体自动播放做了严格限制。默认情况下，带有声音的视频不允许自动播放，只有满足以下任意条件才可以正常自动播放带声音的视频：
- 用户已经和页面有过交互，比如点击、触摸、按键等操作
- 网站被用户标记为允许自动播放的站点
- 视频被设置为静音状态，此时可以无交互自动播放
无交互自动播放静音视频的实现
如果不需要用户交互就直接自动播放，只能先设置视频为静音状态，之后再引导用户开启声音。video标签需要添加autoplay、muted、playsinline属性，其中playsinline是为了在移动端内联播放，避免全屏。
对应的HTML代码如下：
<video src="test.mp4" autoplay muted playsinline controls > 您的浏览器不支持video标签 </video>
用户交互后自动播放带声音视频的实现
如果需要自动播放的同时保留声音，就需要先等待用户和页面产生交互，再触发视频播放并取消静音。可以通过监听用户的点击事件来实现，具体逻辑如下：
首先还是先设置video标签初始为静音自动播放，避免初始加载时的报错：
<video id="myVideo" src="test.mp4" autoplay muted playsinline controls > 您的浏览器不支持video标签 </video> <button id="openSound">开启声音</button>
然后添加JavaScript逻辑，在用户点击按钮时取消静音，同时如果视频暂停了就重新播放：
// 获取video元素和按钮元素
const video = document.getElementById('myVideo');
const openSoundBtn = document.getElementById('openSound');
// 监听按钮点击事件
openSoundBtn.addEventListener('click', function() {
// 取消静音
video.muted = false;
// 如果视频当前是暂停状态，重新播放
if (video.paused) {
video.play().catch(err => {
console.log('播放失败:', err);
});
}
});
常见问题说明
为什么设置了autoplay还是不能自动播放
如果没有设置muted属性，浏览器会阻止自动播放行为，此时控制台会抛出自动播放被阻止的错误提示。如果确实需要带声音自动播放，就需要先引导用户和页面交互，再触发播放。
移动端自动播放失效怎么办
移动端浏览器对自动播放的限制更严格，除了添加muted和autoplay属性外，必须添加playsinline属性，否则视频会自动全屏播放，甚至无法自动播放。部分安卓机型还需要在用户交互后再调用play方法才能正常播放。
如何检测自动播放是否成功
可以通过video标签的play方法返回的Promise来判断，如果自动播放失败，Promise会进入catch回调，此时可以提示用户手动点击播放：
const video = document.getElementById('myVideo');
// 尝试自动播放
video.play().then(() => {
console.log('自动播放成功');
}).catch(err => {
console.log('自动播放失败，请手动点击播放');
// 可以在这里显示手动播放的提示按钮
});
| 属性名 | 作用说明 |
|---|---|
| autoplay | 设置视频加载完成后自动播放 |
| muted | 设置视频默认静音，是浏览器允许自动播放的必要条件 |
| playsinline | 设置在移动端内联播放，不自动全屏 |
| controls | 显示视频默认的控制栏，包含播放暂停、音量调节等按钮 |