学习总结-Cyberplayer视频播放器移动端手机百度打开全屏问题探究

【最新版本的已经修复屏蔽了双击】移步https://bce.bdstatic.com/jwplayer/4.1.6.1/cyberplayer.js

【问题背景】

移动端h5页面使用了Cyberplayer，官网文档移步这里百度云-cyberplayerDemo，使用的老版本的js，在使用过程中发现，用手机百度扫码，安卓环境打开用到这个播放器的页面，双击全屏（咱也不知道这个双击全屏是不是安卓特有的，不过确实只有安卓有问题，前端工程师兼容移动端的艰辛。。。）播放视频会出现黑屏现象。使用全屏按钮可以正常播放。

【探究过程】

1、浏览器排查全屏是内部事件，双击唤起的方式内部和点按钮看起来不太一致，cyberplayer的代码是混淆过的，探究未果

2、想着先反馈第三方解决吧，从官网文档（联系我们）一路找到了百度智能云-登录反馈平台，创建了反馈工单，寻求第三方解决（不过这是个长线吧，当下还是需要靠自己。。。）

3、曲线救国，解决思路：屏蔽双击全屏，

【思路1】容器外部加一个双击默认事件防止调起播放器的双击事件

【结果】不过双击全屏似乎是端事件，在容器侧加了dbclick事件没有效果

【思路2】研究官网API，从全屏事件中想办法屏蔽，发现官网demo有开放player.setFullscreen(true)，手动设置全屏的事件，想着是不是可以承接双击，然后用api唤起全屏就没问题了

【结果】player.setFullscreen(true)也是会黑屏，经了解手机百度安卓端为内部研发的T7内核，是不是视频播放器的全屏操作有异于常规内核

4、最终方案：只能选择在播放器上层添加遮罩，屏蔽双击事件，透传其他单击事件

【解决办法】

1、视频容器添加遮罩，代码如下，处理单击和双击事件

                <div
                    v-if="控制显示的变量判断安卓环境"
                    class="handler-mask"
                    @click="maskClick"
                    @dblclick="maskDbClick"
                ></div>

2、单击事件和双击事件，我简单粗暴的设置了单击事件进行播放器播放，双击事件return

        maskClick(e) {
            player.play();
        },
        maskDbClick(e) {
            return false;
        },

3、这种方案会有问题，就是手百等环境，播放器播放后，播放器的层级就在页面最高了，但是，其他客户端，比如微信等，遮罩的层级会始终高于播放器，就需要在播放过程中，设置不屏蔽，暂停了就屏蔽

            player.onPlay(e => {
                控制显示变量 = false;
            });
            player.onPause(e => {
                控制显示变量 = true;
            });

4、或者可以只根据手机百度ua控制是否显示遮罩，也许更加稳妥，我没有用这个方案，有需要的可以自己尝试一下~