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

时间:2024-02-29 22:34:34
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 { 
     //...               
  }
})