前端音视频自动播放一直都是一个玄学问题
无论是 B 站还是抖音，都可以实现打开视频自动播放，但是在我写的页面中就不行
无论是使用autoplay还是 js 调用play方法都不能实现
后来了解到一个相关知识——浏览器自动播放策略
以谷歌为例
也很容易理解，避免恶意广告之类的东西打扰到用户嘛
要实现浏览器自动播放也不是完全不允许
这里提到一个叫做媒体参与度的东西
特意去查了相关资料
下面是我的媒体参与度指数
可以看到B站的指数是 0.88 而常用开发地址 localhost:52330 只有0.2
我也尝试寻找相关方法修改这个指数，结果很明显，这玩意儿是不可修改的
那只有退而求其次，这里提供两个解决方案
方案一：引导用户进行交互操作，进而播放
这里是通过添加一个播放按钮来实现的
<div>
<video src="test.mp4" autoplay></video>
<div class="modal">
<button class="play">开始播放</button>
</div>
</div>
<script>
// 方案一：互动后播放
const vdo = document.querySelector('video');
const modal = document.querySelector('modal');
const btn = document.querySelector('btn');
async function palay() {
try {
await vdo.play();
modal.style.display = 'none';
btn.removeEventListener('click', play);
} catch (err) {
modal.style.display = 'flex';
btn.addEventListener('click', play);
}
}
play()
</script>
方案二：静音播放，根据条件判断是否打开声音
<div>
<video src="test.mp4" autoplay></video>
<div class="modal">
<button class="play">打开声音</button>
</div>
</div>
<script>
// 方案二：互动后出声
const vdo = document.querySelector('video');
const modal = document.querySelector('modal');
const btn = document.querySelector('btn');
function play(){
vdo.muted = true ; //静音
vdo.play();
const ctx = new AudioContext();
const canAutoPlay = ctx.state === 'running';
ctx.close();
if(canAutoPlay){
vdo.muted = false;
modal.style.display = 'none';
btn.removeEventListener('click',play);
}else{
modal.style.display = 'flex';
btn.addEventListener('click',play);
}
}
play()
</script>
解释下方案二
这里用AudioContext来创建了一个音频上下文
通过判断AudioContext.state的值来判断当前状态
AudioContext.state 有三个返回值
- suspended： audio 被阻塞了
- running：audio 正常运行
- closed：audio 被关闭了
