阿里播放器在微信上使用的坑

一、被劫持的video在微信上同层播放问题

 

现象：

项目中要实现类似淘宝直播的功能，在直播视频上显示弹幕点赞动效等互动DOM，但是使用aliplayer加上playsinline=true，x5-type=h5属性后，安卓下video会被劫持到另一个图层置顶播放，导致在video上无法放置任何DOM结构，而ios在playsinline=true时正常同层播放。

思路：

1. 尝试在阿里云web播放器文档中寻找答案无果（属性排列组合始终不能同时满足不同版本微信及不同设备的同层播放需求）
2. 放弃了阿里云播放器，与原生video作比较，发现原生video的现象与上述现象第二点一模一样，不能同时满足
3. 对比阿里云播放器属性各种排列组合及现象差异发现与阿里自动添加了x5-playsinline属性可能有关

 

最后处理方案：

方案一：去掉阿里云播放器的playsinline属性，改为false，在播放器初始化之后且播放之前（顺序不能错）区分ios做处理加上playsinline，安卓加上x5-video-player-type=h5-page。

方案二：不必移除playsinline，在播放器初始化之后且播放之前区分x5内核移除x5-playsinline（仅移除这个就可以了，不使用x5），安卓加上x5-video-player-type=h5-page。

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

methods: {     handleAliplayer() {         this.aliplayer = new Aliplayer({             id: 'J_prismPlayer',             width: '100%',             height: "100%",             preload: true,             x5_type: 'h5',             autoplay: false,             playsinline: false,             source: source         })         this.aliplayer.on('ready', () = >{             console.log('播放器准备好了') // 禁止在播放器初始化后，视频播放之前设置才生效             const ua = navigator.userAgent.toLocaleLowerCase() const video = document.querySelector('video') if (!video) return             // x5内核             if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {                 video.removeAttribute('x5-playsinline') // x5内核 启用同层H5播放器（会有黑屏缓冲问题）                 video.setAttribute('x5-video-player-type', 'h5-page');             } else {                 // ios端                 video.setAttribute('webkit-playsinline', true);                 video.setAttribute('playsinline', true);             }         })     } }

 

相关问答：

1. 为什么使用x5内核播放后设置z-index层级无效

全屏层是系统级的，不再只页面上的一个元素，各种页面层DOM操作都对他产生不了任何影响。

2. 为什么安卓手机WeChat 播放视频总是全屏

webkit-playsinline && playsinline 视频播放时局域播放，不脱离文档流 。但是这个属性比较特别， 需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。换句话说，如果APP不设置，你页面中加了这标签也无效，这也就是为什么安卓手机WeChat 播放视频总是全屏，因为APP不支持playsinline，而ISO的WeChat却支持。

3. 在微信下你可以选择使用原生浏览器内核渲染video还是启用腾讯的x5内核渲染，有什么区别呢？

如果使用原生渲染，那就和在普通浏览器渲染一样，但是如果启用腾讯x5内核渲染，当视频播放时，x5内核会强制视频全屏播放，但是目前并不支持ios

---

二、 微信上打开自动播放问题

现象：

aliplayer属性添加了autoplay=true，在部分机型微信端失效，必须手动点击播放按钮才能播放直播。

结论：

正如阿里云文档说的，移动端对video的兼容比较差，并且现在的浏览器为了某些用户体验禁止了autoplay，所以需要经过特殊的处理去触发autoplay。但是目前没有完美的方法能够完美地适配安卓和ios的大部分机型，所以暂时先做了以下处理。

安卓下：

1. 部分浏览器支持autoplay，但不是全部，并且是因为从列表页进去详情页的情况下用户已经touch过该页面了才能触发autoplay，这种情况就让它autoplay，满足需求。

2. 对于直接进入详情页的情况暂时没有很好的办法自动播放，目前是不兼容的，所以给一个轻触播放的提醒让用户手动触发播放。

3. 在安卓下应该有些手机也是支持模拟点击播放的，但是目前没有加模拟点击的行为，后续如果需要优化可以加上去测试，不过现在用上面两个结合应该够用了。

ios下：

1. 使用hack的方式在ws的接口WeixinJSBridgeReady或者wx.ready里进行模拟，目前是采取暴力方法(定时器不断点击，先静音后播放)，也不是所有的情况下都适用，iphone6测了就不兼容。

2. 同安卓一样加上了轻触播放让用户主动触发，同时监听playing去控制是否展示清楚播放按钮。

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

mounted() {     // 兼容ios自动播放，可能有部分机型不兼容     const { isiphone } =getPlatform()     document.addEventListener('WeixinJSBridgeReady', () => {         if (isiphone) {             const interval = setInterval(() => {                 if (this.aliplayer) {                     this.aliplayer.mute()                     this.aliplayer.play()                     clearInterval(interval)                 } },500)             }         })     }, methods: {     handleAliplayer() {         // 安卓的自动播放仅仅是打开autoplay: true，暂无更好的兼容性方案         const { isAndroid } =getPlatform()         this.aliplayer = new Aliplayer( {             id: 'J_prismPlayer',             width: '100%',             height: "100%",             isLive: true,             preload: true,             x5_type: 'h5',             autoplay: isAndroid,             playsinline: false,             source: source         })     } }

 

三、其他相关了解

1、关于微信内核

微信6.1版本以上的android用户，都是使用的QQ浏览器的X5内核。5.4-6.1之间的版本，若用户安装了QQ浏览器就是使用的X5内核，若用户未安装浏览器，使用的是系统内核。

微信内置浏览器采用腾讯X5内核，X5内核以增强用户体验为名，给video套上了自己的UI并强制全屏，这个全屏不接受DOM层面的任何约束，视频播放完毕后还会出现QQ自己的视频推荐。

2、同层内联播放相关属性及兼容性解析

• playsinline（iOS 10及以上版本支持playsinline）
• webkit-playsinline（iOS 10 之前的版本支持 webkit-playsinline）
• x5-playsinline（支持安卓x5内核）
• x5-video-player-type="h5"(启用同层H5播放器，div可以呈现在视频上，wechat安卓版特性)

在iOS下，我们可以给video添加webkit-playsinline属性，使视频不脱离文本流，但这个属性在安卓上无效

同层播放的tbs内核兼容性：

 

 

参考：

1. 微信中H5同层Video播放器接入教程https://segmentfault.com/a/1190000013232870#item-1-7

2. video在安卓与ios实际应用中遇到的问题及解决https://segmentfault.com/a/1190000019685244

3. H5同层播放器接入规范https://x5.tencent.com/tbs/guide/video.html

4. X5内核视频之问答汇总https://docs.qq.com/doc/DTUxGdWZic0RLR29B

5. TBS升级基线https://x5.tencent.com/tbs/history.html#/