开发与产品的战争之自动播放视频

起因

产品提了个需求，对于网站上的宣传视频，进入页面就自动播放。但是基于我对chromium内核的一些浅薄了解，我当时就给拒绝了: "浏览器不允许"。（后续我们浏览器默认都是chromium内核的，其它内核的应该也是如此，只是我自己没一一验证）

但是，产品拿着一堆竞品过来："你看看，这个行，这个也行，你们开发行不行"。

作为技术，最怕这种时刻，丢了自己的脸事小，明显这个产品打击面有点大，不能怂，先整理思路，一会甩他脸上。

下面，我们开始来了解了解视频自动播放这个需求。

使用过video标签的肯定知道，现在像下面添加autoplay字段，或者获取元素执行play()方法现在已经不起作用了。

html 复制代码

<video id="video" src="/1.mp4" autoplay controls></video>

javascript 复制代码

let el = document.getElementById('video');
el.play();

那么原因到底在哪呢？其实一个视频能否播放取决于浏览器的播放策略。

播放策略

依稀记得几年前的浏览器是可以自动播放的，后来chrome一家独大后，开始折腾了，限制自动播放视频，但是这个其实真是为用户考量。试问，你正在摸鱼，但是忘了关声音，突然播放视频并且声音...

所以呢，在2018年Chrome就提出了这种自动播放的策略，主要是为了照顾用户的体验感。

Chrome自动播放限制的考量

正如您可能已经注意到的，Web浏览器正在朝着更严格的自动播放策略发展，以改善用户体验，最大限度地减少安装广告拦截程序的动机，并减少昂贵的数据流量消耗。这些更改旨在为用户提供更大的播放控制权，并使拥有合法用例的视频发布者受益。

Chrome的自动播放政策

静音自动播放总是允许的。
在下列情况下允许使用声音自动播放：
- 用户已经与域进行了交互（点击，tap等强交互）。
- 在桌面上，用户的媒体参与指数阈值(MEI)已被越过，这意味着用户以前播放带有声音的视频。
- 在移动设备上，用户已将该网站添加到移动设备的主屏幕或者在桌面安装了PWA。
顶部框架可以将自动播放权限授予其iframe以允许自动播放声音。

媒体参与度

媒体参与度（Media Engagement）是指用户与媒体内容进行互动的程度，可以通过多个指标来衡量。这些指标主要包括观看时间、观看率、转化率、交互行为等。Chrome基于这个媒体参与度有一套自己算法，我们可以通过：chrome://media-engagement/ 查看。参与度高，就可能触发自动播放。

但是对于我们来说：

参与度无法更改
参与度算法在不停改动与改进

分析策略

我们可以看到，针对自动播放视频，其实chrome还是给了一些方法的。

第一条，静音时可触发自动播放。但是这个感觉就是一个GIF啊。

html 复制代码

<video id="video" src="/1.mp4" autoplay controls  muted></video>

第二条，又有三种情况：

用户已经和页面产生了强交互，一般桌面端的点击，移动端的tap。鼠标移动等等都不算强交互。这其实还是违背我们自动播放的产品需求的，毕竟我都点击了，但是有时候也只能采用这个方案；

在移动设备上，将网站添加主屏幕或者安装PWA。其实这个咱们国内几乎可以忽略，有没有注意过有时有的网站上地址栏会出现一个加号，有兴趣的可以自己研究研究。因为咱们有别的大杀器，比如小程序。

我们着重看看第二条，我上面提到，产品拿着竞品来打脸，他就是因为触发了这条，才可以自动播放，但是这个对于第一次访问网站或者访问不多的人，还是有问题啊。并且这个参与度无法更改并且不是稳定不变的。

第三条，简单理解，父级如果符合了第一条第二条，那么内嵌的iframe可以继承自动播放权限，这玩意等于没说。

所以，其实到了这一步，我们就可以找产品搬扯去了，但是作为一个负责任的技术，我们还要给他一个解决方案，不能做只反驳不思考的开发者。

解决方案

有了以上的限制和了解，不点击有声音的完美的自动播放我们其实已经可以放弃了（整个弹窗广告，不关不行的那种？😄）。但是为了保命以及用户体验，我们其实经常遇到的有两个方案。

因为我们无法了解用户的媒体参与度，能不能先尝试自动播放，不能播放让用户点击播放？

答案肯定是可以的。这个解决方案简单也很常用。

html 复制代码

<body>
    <video id="video" src="/1.mp4"></video>
    <button id="btn" onclick="playViedo()">播放</button>
    

    <script>
        const btn = document.getElementById('btn');
        const el = document.getElementById('video');
       async function playViedo() {
            try {
                await el.play();
                btn.style.display = 'none';
             } catch (error) {
                btn.style.display = 'block';
             }
        }
      
       playViedo()
    </script>
</body>

其实我们经常浏览视频网站，发现一个现象，进去后自动播放视频了，但是莫名其妙给我页面静音了，得手动点击音量按钮。这其实就是另一种方案，因为静音可以播放，那就先静音播放，然后检测有没有声音，有的话继续播放，没有的话显示解除静音按钮，让用户去自己点击。

对于声音，我们可以判断音轨是否在运行来判定，这个方案我感觉目前更好一点。

html 复制代码

<body>
    <video id="video" src="/1.mp4" muted></video>
    <button id="btn" onclick="playViedo()">解除静音</button>
    
    <script>
        const btn = document.getElementById('btn');
        const el = document.getElementById('video');
        function playViedo() {
            el.play();
            const ctx = new AudioContext();
            const isRunning = ctx.state == 'running';
            ctx.close();

            if (isRunning) {
                el.muted = false;
                btn.style.display = 'none';
            }else{
                btn.style.display = 'block';
            }
            
        }
      
       playViedo()
    </script>
</body>

尾声

好了，这下你可以理直气壮并且带着办法去找产品了。其实以上场景也只是一个简单的玩笑，以前一直只是知道这么个问题，也知道问题在哪，但是这次看到一个视频讲这些，趁着这个契机我就想着自己也将其完整的整理一下。