我正在参加「掘金·启航计划」

想让`<video>`既不弹窗又能自动播放，怎么这么难

如果你曾在移动端的页面里用过<video>做一些动效，就会深感世界的不易，为什么，为什么一个简简单单的视频在ios和android，在app站内和站外，在微信内，会有这么多的差异？

这些差异里最直观影响体验的当属ios的弹窗播放和两边的自动播放了，我一个动效，难道还要用户点一下屏幕才能播吗？

是坑就要有人踩，那么接下来，请看我的踩坑记录。

关于自动播放

最终也没有攻克成功的是 「android微信」，怎么也无法自动播放。如果有朋友成功攻克了这个难题，请务必告诉我解决的思路，感谢。

1. 端内-最好也是最难解决

好解决在，只需要app端修改一下webview的这个属性，就完事大吉了。

 webview.mediaPlaybackRequiresUserAction = false

难解决也是在此，需要依赖客户端发版的解决方案，不能算是个最优的解法。这里有一个性能相对降低但不依赖客户端的解法，可供参考： GitHub - phoboslab/jsmpeg at b5799bfc213c7732e1f68754d9244f47258d8be5 赫赫有名（5.9k star）的视频解析库，可用于视频直播或点播，特色是高兼容、低延迟。原理是通过拉取视频流，将其用webGL一帧帧渲染在页面上。跟set video.currentTime相比，直接操作更底层的要素，所以性能相对好一些。

使用时需要注意：

jsmpeg只能解析.ts文件，而且是规范的ts文件，所以需要自己做先行转换，建议使用ffmpeg。
转换的指令如下（需要先安装ffmpeg）（注意转换出来的尺寸）：

ffmpeg -i in.mp4 -f mpegts \
        -codec:v mpeg1video -s 960x540 -b:v 1500k -r 30 -bf 0 \
        -codec:a mp2 -ar 44100 -ac 1 -b:a 128k \
        out.ts

2. 普通站外

理论上来说，只需要autoplay和muted两个属性即可

3. 微信内-奇妙的解决方案，但有用

引入微信的sdk，并且等到wx.ready再初始视频标签

说实话，真不知道为啥有用，估计是微信自己内部做了啥？但是亲测这样可以在ios的微信内自动播放（android别想了）。我的微信版本是8.0.29，同事们的微信测试也都没有问题，所以…就这么记吧。

另外需要注意的两点是：

如果你跟我一样，在本地环境可以正常load wx的sdk，但测试和生产环境不行，把这个js下载下来换成自己的域名。猜测是跟安全域名有关，但，也不会报错，只会超时。
初始化的时候，video标签可以设置透明度，但是不要没有。也即是，可以v-show，但不要v-if。不然会播不了。

        loadJsPromise('http://res.wx.qq.com/open/js/jweixin-1.6.0.js')
          .then(() => {
            window.wx.ready(() => {
              // 开始初始化video标签
            });
          })

关于行内播放

对应关键词，不全屏播放

1. 端内

webview.allowsInlineMediaPlayback = true

参考上面的自动播放，那个也可以。

2. 端外

这一堆属性糊上去。

        autoPlay={true}
        muted={true}
        controls={false}
        playsInline={true}
        webkit-playsinline=“true”
        x5-playsinline=“true”
        x5-video-player-type=“h5”
        x5-video-player-fullscreen=“portraint”
        x-webkit-airplay=“allow”

大略起效果的对应关系是：

safari
- webkit-playsinline
- playsinline
微信
- x5-video-player-type=“h5”
- x5-video-player-fullscreen=“portraint”
- x5-playsinline=“true”

综上所述，视频作为一个90分的动效载体，可以说除了兼容性需要多费心之外什么都好，如果要用的话，坑，我先踩为敬。

想让<video>既不弹窗又能自动播放，怎么这么难