关于H5页面在微信浏览器中音视频播放的问题

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

p.p1 { margin: 0; font: 12px ".PingFang SC" }
span.s1 { font: 12px "Helvetica Neue" }

顾名思义这是一个页面可见性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 {
     //...
  }

})

p.p1 { margin: 0; font: 12px "Helvetica Neue" }
span.s1 { font: 12px ".PingFang SC" }
p.p1 { margin: 0; font: 12px "Helvetica Neue" }
span.s1 { font: 12px ".PingFang SC" }
p.p1 { margin: 0; font: 12px ".PingFang SC" }