浏览器的自动播放策略
策略详情：
Chrome的自动播放政策很简单：
1、始终允许静音自动播放
2、在以下情况下，带声音的自动播放会被允许
2.1、用户已经与当前页面进行了交互(click、tap)
2.2、在桌面设备上，用户的媒体参与度指数阈值已超过，这意味着，用户之前播放过有声视频
2.3、用户已经将网站添加到移动设备上的主屏幕或在桌面安装了PWA（这个你可以忽略了！）
3、顶部帧可以将自动播放权限委派给其 iframe，允许自动播放声音
媒体参与度，是什么？
媒体参与度(MEI)，衡量个人在网站上使用多媒体的倾向，
它是一个数字，可以通过 chrome://media-engagement/ 查看，
数值越高，用户对该站点的媒体参与度越高，就越有机会自动播放
对于开发者而言，媒体参与度的计算规则，无法通过技术手段更改
开发者最佳实现：
方案1：互动后播放
先尝试自动播放，如果发生异常，则引导用户进行交互动作，然后再进行播放
方案2：互动后出声
先静音播放，然后根据，是否能自动播放，决定是否取消静音，如果：
1、能自动播放，取消静音
2、不能自动播放，引导用户进行互动操作后，取消静音
代码示例，把.MP4文件换掉后，直接浏览器运行这个.html文件，就能看到效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浏览器的自动播放策略</title>
</head>
<style>
/* 视频容器样式 */
.vdo-container {
position: relative;
width: 640px;
height: 200px;
background: pink;
margin: 60px auto;
}
/* 视频样式 */
video {
height: 200px;
}
/* 模态框样式 */
.modal {
width: 640px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.4);
color: white;
padding: 10px 20px;
border-radius: 5px;
display: none;
/* 默认不显示 */
align-items: center;
justify-content: center;
}
/* 按钮样式 */
.btn {
padding: 10px 20px;
background-color: #4CAF50;
/* 绿色 */
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}
/* 鼠标悬停按钮效果 */
.btn:hover {
background-color: #45a049;
}
</style>
<body>
<div class="vdo-container">
<video src="./test.mp4"></video>
<div class="modal">
<button class="btn">开始播放</button>
</div>
</div>
</body>
<script>
const vdo = document.querySelector("video")
const modal = document.querySelector(".modal")
const btn = document.querySelector(".btn")
function play() {
vdo.muted = true // 静音
vdo.play()
/*
创建一个新的音频上下文，
AudioContext 是 Web Audio API 的一部分，
它提供了一个音频处理环境，你可以在其中创建和修改音频数据
*/
const ctx = new AudioContext()
/*
const canAutoPlay = ctx.state === 'running'，的意思是：检查 AudioContext 的状态是否为 running，
如果为running，则表示，音频上下文已经成功创建并运行，
这意味着，浏览器允许自动播放音频和视频。
*/
const canAutoPlay = ctx.state === 'running'
/*
关闭AudioContext，
因为，在这个函数中，你只检查其状态，并不进行其他音频处理，
所以，立即关闭它是合理的。
*/
ctx.close()
if (canAutoPlay) {
/*
如果 canAutoPlay 为 true（即浏览器允许自动播放）
vdo.muted = false：取消视频的静音状态，
既然视频已经开始播放，并且，没有遇到自动播放的问题，那么可以取消静音，让用户听到视频的声音。
*/
vdo.muted = false
modal.style.display = 'none'
// 从按钮上移除play函数的点击事件监听器，因为视频已经开始播放，所以不需要再监听这个按钮的点击事件。
btn.removeEventListener('click', play)
} else {
// 如果 canAutoPlay 为 false（浏览器不允许自动播放）
// modal.style.display = 'flex'：显示模态框，目的就是为了让用户点一下，用户和浏览器交互后，就能播放声音了
modal.style.display = 'flex'
btn.addEventListener('click', play)
}
}
play()
</script>
</html>
