Android 上，因为各个软件使用的浏览器渲染引擎不一样，所以直播卖货系统页面播放的效果差异也很大，这里主要以微信为主。微信使用的是腾讯浏览器自带的X5内核。
而iOS是不允许使用第三方浏览器内核的，就是Google Chrome也是用的系统内建的Webkit浏览器内核 (就是WebView了)，APP 都是使用的系统自带的浏览器进行页面渲染,所以IOS的微信浏览器是Chrome的webkit内核。
这就导致直播卖货系统H5页面在android和iOS微信中的部分表现差异，但由于X5内核是腾讯基于开源Webkit优化的浏览器渲染引擎，所以除了对video标签的挟持，和下载页跳转被腾讯应用宝挟持外，其他表现上还没有遇到特别折磨人的差别。
1.视频播放自动全屏问题
这个问题在iOS和安卓下都有，浏览器默认全屏播放视频，解决办法很简单，给video加以下属性就可以解决：
playsinline="true" webkit-playsinline="true" //webkit内核 x5-playsinline="true" //X5内核
2.直播卖货系统音视频自动播放问题
在最新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，已不再允许自动播放音频和视频。就算你为video或audio标签设置了autoplay属性也一样不能自动播放。
<video autoplay></video>
如果用 javascript 代码显式调用play方法，控制台会看到如下异常：Uncaught (in promise) DOMException。
这是因为，Chrome只允许用户主动对网页进行主动触发后才可自动播放音频和视频。
解决办法：利用微信提供的js API WeixinJSBridge
var video = document.getElementById("video");
if (window.WeixinJSBridge) {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
video.play();
}, false);
} else {
document.addEventListener("WeixinJSBridgeReady", function () {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
video.play();
});
}, false);
}
video.play();
3.android下的直播卖货系统视频同层播放问题
H5页面分享到微信上播放视频，最大的坑就是在Android手机上，X5浏览器会劫持Video标签用腾讯播放器弹出全屏播放，处于最上层，覆盖DOM元素，更可恶的是播放完毕时，会出现很多腾讯的广告视频。
其实上面提到的`x5-playsinline`属性也能一部分解决这个问题，但在自定义视频样式等情况下会导致视频尺寸、样式等各种各样的问题，其实腾讯浏览器提供了同层播放的解决办法，文档请戳：【https://x5.tencent.com/tbs/guide/video.html】
同层播放器的使用方式跟普通的video元素差别不大，只是需要加上两个X5的自定义属性：「x5-video-player-type」和「x5-video-player-fullscreen」。
<video src="http://xxx.mp4"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-video-orientation="portrait"
/>
属性说明：
`x5-video-player-type="h5"` 声明启用同层H5播放器
`x5-video-player-fullscreen` 是否全屏播放
`x5-video-orientation` 播放控制横竖屏， landscape 横屏, portraint竖屏，默认竖屏（此属性只在声明了x5-video-player-type=”h5”情况下生效）
有些情况下可能还会出现视频全屏播放有黑边的问题
解决办法：
`object-fit: cover` 这是一个css3属性，cover的意思是剧中填满并裁剪，它有一个特性，保证替换内容尺寸一定大于容器尺寸，并且宽度和高度至少有一个和容器一致，所以这个方法可能会导致视频内容展示不全。
官方对全屏播放的建议：
1. 监听resize事件实现自适应视口大小变化，视频播放时会调整视口大小
```javascript
window.onresize = function(){
video.style.width = window.innerWidth + "px";
video.style.height = window.innerHeight + "px";
}
```
2. 在视频播放期间的交互，弹框，字幕在视频视频区域中，不要在视频区域外
3. 对于直播类全屏视频，最好不要在最顶部放交互性元素
4.后台切出自动停止播放音乐
在微信中打开一个自动播放音乐的直播卖货系统H5页面，有一个容易忽略的问题，就是在不退出页面的情况下，后台切出微信时，页面的音乐仍在播放，这样用户体验就比较差。试了一下，播放中的视频在页面切出时会自动停止播放，音乐则不会，需要手动处理。而在Android中腾讯X5浏览器处理的就比较完善了，播放中的音视频在切出后台时会停止播放并且切回页面后自动续播。
解决办法：
HTML5新提供的API：visibilitychange
顾名思义这是一个页面可见性API，浏览器标签页被隐藏或显示的时候会触发visibilitychange事件，对应的可以通过Document.visibilityState 只读属性来获取当前标签页在浏览器中的激活状态：
visible: 页面内容至少是部分可见。 在实际中，这意味着页面是非最小化窗口的前景选项卡。 hidden : 页面内容对用户不可见。 在实际中，这意味着文档可以是一个后台标签，或是最小化窗口的一部分，或是在操作系统锁屏激活的状态下。 prerender : 页面内容正在被预渲染且对用户是不可见的(被document.hidden当做隐藏). 文档可能初始状态为prerender，但绝不会从其它值转为该值。 注释：浏览器支持是可选的。 unloaded : 页面正在从内存中卸载。 注释：浏览器支持是可选的。
所以要实现后台切出时停止播放音乐通过监听visibilitychange事件就能实现啦：
document.addEventListener('visibilitychange', function () {
// 用户离开了当前页面
if (document.visibilityState === 'hidden') {
//...
}
// 用户打开或回到页面
if (document.visibilityState === 'visible') {
//...
}
});
//或者
document.addEventListener("visibilitychange", (e) => {
if (e.hidden) {
//...
} else {
//...
}
})
本文转载自https://www.cnblogs.com/jlliu/p/11233373.html，仅作分享用