解决微信浏览器视频小窗播放

还久不发搏客了,因为最近一直在忙工作上的事情。

今天主要讲讲一个直播播放器的故事。因为最近工作需要,开始接触了下直播和im聊天。

这里我们使用的是阿里云的直播功能,(挺好用的)obs推流,然后web播放器播放出来。

这里我使用了腾讯开发的一款直播web播放器-TcPlayer。

相关文档在这里,有需要的可以看看:https://cloud.tencent.com/document/product/267/7479

在此之前,也使用过网易云信的web播放器和阿里的,为了兼容,调整过很多遍。腾讯的这个,使用起来是比较方便的。

因为需求,我们需要客户在微信里扫码打开这个直播页面进行观看。

然后问题就来了,点开视频的时候,会直接进入全屏播放视频,就是相当于你播放的时候,进入了另一个页面,但是我们需要用户既可以观看,也能在下面的im聊天室里进行聊天,所有全屏后就无法同时进行这两种操作了。

一开始也换了很多的web播放器进行测试,发现都有这个问题。

无奈,只好借助百度大法了。

发现原来腾讯的产品策略是:除了QQ域名下的视频,其它的视频全都默认全屏播放。

这一点,腾讯做的就是非常过分了,当然解决办法也是有的,就是给video加上属性,下面我贴上我解决的方法

<video src="" controls="" x5-playsinline=""playsinline="" webkit-playsinline=""poster="" preload="auto"></video>

只要给video元素设置这些属性即可实现兼容。

然后我使用了TcPlayer播放器后,查看了下它的元素,加上一段js代码就把这个问题解决了。

var attrs={

       "controls":" ",

       "x5-playsinline":" ",

       "playsinline":" ",

       "webkit-playsinline":" ",

       "poster":" ",

        "preload":"auto"

 };

 $("video").attr(attrs);

不知道以后会不会失效,但是先记下来,给有需要的人看看。

另外使用微信的jsapi进行录音的时候,切记不可太过频繁的调用wx.startRecord和wx.stopRecord事件,不然会被玩坏掉的,能导致你自己的微信都发不出语音消息,必须要重启微信。


5 条评论
gravatar头像