自动播放器策略
先了解浏览器的自动播放器策略
- 始终允许静音自动播放
- 在以下情况,带声音的自动播放才会被允许
2.1 用户已经与当前域进行交互
2.2 在桌面上,用户的媒体参与指数阈值(MEI)已被越过,这意味着用户以前播放带有声音的视频。
2.3 用户已将网站添加到移动设备上的主屏幕或者桌面上安装pwa - 顶部帧可以将自动播放权限委派给其他iframe,以允许自动播放声音
媒体参与度(MEI,Media Engagement Index)
参与度衡量个人在网站上使用多媒体的倾向度
通过该链接查看你的媒体参与度:about://media-engagement
自动播放代码
1.方法一
<video url="xxxx" id="videoId"/>
let video = document.getElementById("videoId");
function play(){
//视频元素可以选择静音后再播放,提示用户打开声音
video.muted=true;//打开静音
video.play();
//判断当前是否可以用播放声音
const ctx = new AudioContext();
const canAutoPlay = ctx.state === 'running';//能播放声音返回running
ctx.close();
if(canAutoPlay){
video.muted = false;//取消静音
}
}
play();
2.方法二
<!-- Autoplay is allowed. -->
<iframe src="xxxx" allow="autoplay">
<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="xxxx" allow="autoplay; fullscreen">