H5同层播放器接入规范:https://x5.tencent.com/tbs/guide/video.html
Android端的微信有一个神奇H5(X5)同层播放器。为啥神奇?这里不能骂脏话咱们还是换一个话题吧。
开启X5同层播放器的方法
在video标签上加上x5-video-player-type="h5"
x5-video-player-fullscreen="true"
就开启了X5同层播放器了,当视频开始播放回自动进入X5同层播放器
属性解释
x5-video-player-type="h5"
声明启用同层H5播放器
x5-video-player-fullscreen="true"
视频在播放时进入到全屏模式
更多属性自己看官方文档(文章最上面有链接)
监听X5播放器进入与退出全屏
监听video的x5videoenterfullscreen
x5videoexitfullscreen
事件
属性解释
x5videoenterfullscreen
:进入全屏通知
x5videoexitfullscreen
:退出全屏通知
详细用法自己看官方文档吧
X5播放器怎么退出呢?
官网并没有给出退出的方法,查阅无数资料也没有找到。项目要求播放完要退出做分享或者其它事,怎么办?怎么办?怎么办?
无意间发现了一个H5案例,他是怎么退出的。然后把他压缩过的代码不断的分析,我竟然知道了他怎么做的。瞬间开心的不得了。
退出办法:
给video标签设定video.style.display="none"
的样式X5就退出了
监听退出通知中再设置回来就搞定了video.style.display=""
给video的父级标签设置display
也同样生效
再开心一会,哈哈哈哈~~~~
什么?同时开启两个X5退出白屏,MDD!!!
我想这个坑可能大多数人都不会遇到,因为很少有需求要开启两个X5,但我们公司要做视频无缝切换,需要开启两个,两个啊。一时又陷入了尴尬,还是各种查各种查不到。领导非常重视这个bug,开早会特意和我说,今天把其它工作放一放,就解决这个问题。瞬间压力山大。开启一天的各种情况测试。我C我发现问题的关键了。竟然和退出顺序有关系!
白屏原因
竟然是退出顺序不对,先开启的要后退出(先进后出原则)
解决办法
1.监听进入X5:监听到把已经进入的存到一个数组中。
2.从最后一个开始退出:取出数组中最后一个,然后进行退出,监听退出成功后再退出第一个。
注意:要在第二个退出成功后再退出第一个,也可以采用第二个在定时器中退出
X5退出的问题终于解决了,分享给小伙伴希望对你们有帮助。
文章是我原创,欢迎收藏转载,转载请注明出处。
出处:https://www.jianshu.com/p/5a770e984d5c
网友评论