前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于直播卖货系统平台在微信浏览器中音视频播放的问题

关于直播卖货系统平台在微信浏览器中音视频播放的问题

作者头像
云豹kj的晨曦
修改2020-09-17 17:55:04
1.2K0
修改2020-09-17 17:55:04
举报
文章被收录于专栏:直播+

Android 上,因为各个软件使用的浏览器渲染引擎不一样,所以直播卖货系统页面播放的效果差异也很大,这里主要以微信为主。微信使用的是腾讯浏览器自带的X5内核。

而iOS是不允许使用第三方浏览器内核的,就是Google Chrome也是用的系统内建的Webkit浏览器内核 (就是WebView了),APP 都是使用的系统自带的浏览器进行页面渲染,所以IOS的微信浏览器是Chrome的webkit内核。

这就导致直播卖货系统H5页面在android和iOS微信中的部分表现差异,但由于X5内核是腾讯基于开源Webkit优化的浏览器渲染引擎,所以除了对video标签的挟持,和下载页跳转被腾讯应用宝挟持外,其他表现上还没有遇到特别折磨人的差别。

1.视频播放自动全屏问题

这个问题在iOS和安卓下都有,浏览器默认全屏播放视频,解决办法很简单,给video加以下属性就可以解决:

代码语言:javascript
复制
playsinline="true"
webkit-playsinline="true"  //webkit内核
x5-playsinline="true" //X5内核

2.直播卖货系统音视频自动播放问题

在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,已不再允许自动播放音频和视频。就算你为video或audio标签设置了autoplay属性也一样不能自动播放。

代码语言:javascript
复制
<video autoplay></video>

如果用 javascript 代码显式调用play方法,控制台会看到如下异常:Uncaught (in promise) DOMException。

这是因为,Chrome只允许用户主动对网页进行主动触发后才可自动播放音频和视频。

解决办法:利用微信提供的js API WeixinJSBridge

代码语言:javascript
复制
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」。

代码语言:javascript
复制
<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 只读属性来获取当前标签页在浏览器中的激活状态:

代码语言:javascript
复制
visible: 页面内容至少是部分可见。 在实际中,这意味着页面是非最小化窗口的前景选项卡。
hidden : 页面内容对用户不可见。 在实际中,这意味着文档可以是一个后台标签,或是最小化窗口的一部分,或是在操作系统锁屏激活的状态下。
prerender : 页面内容正在被预渲染且对用户是不可见的(被document.hidden当做隐藏). 文档可能初始状态为prerender,但绝不会从其它值转为该值。 注释:浏览器支持是可选的。
unloaded : 页面正在从内存中卸载。 注释:浏览器支持是可选的。

所以要实现后台切出时停止播放音乐通过监听visibilitychange事件就能实现啦:

代码语言:javascript
复制
document.addEventListener('visibilitychange', function () {              
  // 用户离开了当前页面
  if (document.visibilityState === 'hidden') {
    //...
  }
  // 用户打开或回到页面
  if (document.visibilityState === 'visible') {
    //...
  }
});
//或者
代码语言:javascript
复制
document.addEventListener("visibilitychange", (e) => {
代码语言:javascript
复制
  if (e.hidden) {  
     //...
  } else { 
     //...               
  }
代码语言:javascript
复制
})
代码语言:javascript
复制
本文转载自https://www.cnblogs.com/jlliu/p/11233373.html,仅作分享用

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云直播
云直播(Cloud Streaming Services,CSS)为您提供极速、稳定、专业的云端直播处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、快直播、云导播台三种服务,分别针对大规模实时观看、超低延时直播、便捷云端导播的场景,配合腾讯云视立方·直播 SDK,为您提供一站式的音视频直播解决方案。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档