play() Promise 捕获 reject → 动态友情提示 + 用户交互兜底播放
在 Web 开发中，由于隐私和用户体验的考虑，现代浏览器对自动播放视频有诸多限制，尤其是当视频包含声音时。这些限制通常要求：
| 方案 | 做法 | 适用 |
|---|---|---|
| 确保视频静音自动播放 | 在 video 标签中添加 muted 属性和 autoplay 属性 | 大多数浏览器允许静音视频自动播放 |
| 通过用户交互触发播放 | 如果视频需要声音，在用户与页面交互后（如点击一个按钮）再播放 | 需要声音的视频 |
| 使用 JavaScript 监听页面交互 | 监听页面上的点击或键盘事件，在这些事件发生时播放视频 | 更灵活的控制 |
我们借用 play() 方法会返回一个 Promise 对象、该对象会被 rejected 的特性，来动态显示友情提示，监听友情提示的操作来自动播放：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<video id="myVideo" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div id="playPrompt" style="display:none; color:red;">请点击播放视频。</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var video = document.getElementById("myVideo");
var playPrompt = document.getElementById("playPrompt");
// 尝试自动播放视频
video.play()
.then(() => {
// 如果视频成功自动播放，隐藏提示
playPrompt.style.display = 'none';
console.log('Video is playing automatically.');
})
.catch(error => {
// 如果自动播放失败（通常是因为浏览器策略），显示提示
playPrompt.style.display = 'block';
console.error('Failed to play video automatically:', error);
// 可以添加一个事件监听器，让用户点击提示来播放视频
playPrompt.addEventListener('click', function () {
video.play()
.then(() => {
playPrompt.style.display = 'none'; // 视频播放后隐藏提示
})
.catch(error => {
console.error('Failed to play video on click:', error);
});
});
});
// 注意：这里的自动播放尝试可能立即失败，因为大多数现代浏览器不允许在页面加载时自动播放带有声音的视频
// 除非视频是静音的，或者用户已经与页面进行了某种形式的交互（如点击）
});
</script>
</body>
</html>可以创建一个长度为 0 的音频或者视频小文件，动态创建播放标签，这样不至于每次都加载大视频。借助此判断整个网页是否可以自动播放，再根据逻辑展示友情提示即可。
// 优化思路示意：用零时长小文件探测能否自动播放
const probe = document.createElement('video'); // 或 audio
probe.src = 'tiny.mp4'; // 一个长度为 0 的极小小文件
probe.muted = true;
probe.play()
.then(() => {
// 整个页面可以自动播放 → 直接播真实视频
realVideo.play();
})
.catch(() => {
// 浏览器禁止自动播放 → 展示"请点击播放"提示
showPrompt();
});| 术语 | 定义 |
|---|---|
| autoplay | HTML 媒体属性，声明自动播放（带声音通常被浏览器拦截） |
| muted | 静音属性；静音 + autoplay 是浏览器允许的自动播放组合 |
| play() / pause() | 媒体元素播放 / 暂停方法，play() 返回 Promise |
| DOMException / NotAllowedError | 自动播放被拒绝时 play() 的 reject 原因（浏览器策略） |
| 视口（viewport） | 浏览器可视区域；视频需在视口内才可能自动播放 |
| 用户手势（user gesture） | 点击 / 键盘等真实交互，是带声音播放的必要条件 |