美文网首页张蕾的技术博客WEB前端程序开发
如何退出微信X5同层播放器?

如何退出微信X5同层播放器?

作者: 黑雷 | 来源:发表于2018-07-19 13:05 被阅读1次

    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

    相关文章

      网友评论

        本文标题:如何退出微信X5同层播放器?

        本文链接:https://www.haomeiwen.com/subject/ypttmftx.html