草庐IT

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

蛋蛋fighting哈湫 2023-12-15 原文

【最新版本的已经修复屏蔽了双击】移步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控制是否显示遮罩，也许更加稳妥，我没有用这个方案，有需要的可以自己尝试一下~

探究Cyberplayerxff0cxff0xffvue.js前端html5javascript

有关学习总结-Cyberplayer视频播放器移动端手机百度打开全屏问题探究的更多相关文章

  1. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  2. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  3. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  4. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题，我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  5. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  6. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  7. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章？ - 2

    我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  8. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容：函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数，那么至少存在一个，使得:通过这个表达式我们可以知道，f(x)是函数的主体，a和b可以看作是主体函数f(x)中所取的两个值。那么可以有，  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法： 外层函数f(x)是一致的，并且h(x)和g(x)是等价无穷小。此时，利用拉格朗日定理，将原式替换为 ，再进行求解，往往会省去复合函数求极限的很多麻烦。使用要注意：1.要先找到主体函数f(x)，即外层函数必须相同。2.f(x)找到后，复合部分是等价无穷小。3.要满足作差的形式。如果是加

  9. LC滤波器设计学习笔记（一）滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称

  10. SPI接收数据异常问题总结 - 2

    SPI接收数据左移一位问题目录SPI接收数据左移一位问题一、问题描述二、问题分析三、探究原理四、经验总结最近在工作在学习调试SPI的过程中遇到一个问题——接收数据整体向左移了一位（1bit）。SPI数据收发是数据交换，因此接收数据时从第二个字节开始才是有效数据，也就是数据整体向右移一个字节（1byte）。请教前辈之后也没有得到解决，通过在网上查阅前人经验终于解决问题，所以写一个避坑经验总结。实际背景：MCU与一款芯片使用spi通信，MCU作为主机，芯片作为从机。这款芯片采用的是它规定的六线SPI，多了两根线：RDY和INT，这样从机就可以主动请求主机给主机发送数据了。一、问题描述根据从机芯片手

随机推荐