记录--浏览器的自动播放策略

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

平常有接触到媒体播放的朋友应该会发现一个问题，我们在其他视频网站时，他们的视频在进入页面的时候能自动播放，但是在我们实际开发中却不能，明明我们都设置了autoplay 属性，浏览器为什么区别对待呢？ 其实，这是浏览器对用户体验的一个优化，我们称之为浏览器自动播放策略，不同的浏览器优化方案也不同，下面我们以Chrome为例。

Chrome浏览器的自动播放策略

策略详情

1. 始终允许静音自动播放
2. 在以下情况下，带声音的自动播放会被允许：

• 用户已经与当前页面进行了交互（click、tap）
• 在桌面设备上，用户的媒体参与度指数阈值已超过，这意味着用户之前播放过有声音的视频
• 用户已将网站添加到移动设备上的主屏幕或者桌面上安装了PWA

3. 顶部帧可以将自动播放权限委派给其iframe，以允许自动播放声音

媒体参与度（MEI， Media Emgagement Index）

媒体参与度（MEI）衡量个人在网站上使用多媒体的倾向。
它是一个数值，可通过chrome://media-engagement/查看。
数值越高，用户对该站点的媒体参与度越高，就越有机会自动播放。

对于开发者而言：

1. 媒体参与度的计算规则无法通过计算手段改变
2. 媒体参与度的计算规则不同版本的浏览器可能有所变动

解决方案

一般这种问题的解决方案只能在业务流程上进行变通，引导用户去操作。

引导用户播放

先尝试自动播放，若发生异常，引导用户进行互动操作

    const videoPlay = async () => {
        try {
            // 播放视频
            await ref.current.play();
        } catch (err) {
            // 显示提示
            setIsVisible(true)
        }
    };

提示错误

交互效果

引导用户取消静音

先静音播放，根据是否能自动播放决定是否取消静音，如果不能自动播放，引导用户取消静音

   const videoPlay = async () => {
        ref.current.muted = true
        ref.current.play();
        const ctx = new AudioContext()
        const canAutoPaly =  ctx.state === 'running'
        ctx.close
        if(canAutoPaly){
            ref.current.muted = false
        }else{
            setIsVisible(true)
        }
    };

交互效果

本文转载于:

https://juejin.cn/post/7296845454367637556

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。