VideoPlayer层级(置底)解决方案

|前言

本文基于 Cocos Creator 「2.4.6」「安卓原生」 撰写。

关于Cocos Creator,有些比较特殊的组件,比如 「VideoPlayer」 或者 「WebView」 ,它们总是会把内容置顶渲染,导致不满足场景需要,体验比较差,在我正常使用他的情况下,还有很多意想不到的问题,例如:

  1. 正常流程下它不能在组件上添加其他渲染组件;

  2. 切换场景或者后台时也会偶现视频组件的残影;

  3. 视频解析慢,原生表现极差,时常发生卡帧,阻碍正常渲染流程;

  4. 等等…

|讨论解析方案

「思路1」 :将视频层级放到cocos层级下面,简单粗暴;

「思路2」 :无;

|解放方案

好吧,既然有了这个思路,我们就着手按照这个方向攻克吧。算了,我也不说这么多废话了,直接给兄弟们上解决方案!

把屏幕设置为透明

首先就是把组件 「VideoPlayer」 所在的场景屏幕背景色设置为透明。

//Main Camera
onLoad() { 
     this.node.getComponent(cc.Camera).backgroundColor = cc.color(0, 0, 0, 0);
}

设置像素格式

紧接着,设置一下像素格式,在Android原生工作中,找到 「AppActivity.java」 文件,

glSurfaceView.setEGLConfigChooser(8, 8, 8, 8, 16, 8);  
glSurfaceView.getHolder().setFormat(PixelFormat.RGBA_8888);  
glSurfaceView.setZOrderMediaOverlay(true);

附图1.1

Android原生层取消视频置顶

打开Android Studio,找到 「Cocos2dxVideoHelper.java」 ,搜索到 「setZOrderOnTop」 方法,注释掉它!

附图1.2

向下传递事件

还是在Android Studio中,找到 「Cocos2dxVideoView.java」 ,搜索到重写的 「onTouchEvent」 方法,改为false,如果没搜到这个方法没关系,可以自己添加。

  @Override  
public boolean onTouchEvent(MotionEvent event) {
      if ((event.getAction() & MotionEvent.ACTION_MASK) == MotionEvent.ACTION_UP) {    
         this.sendEvent(EVENT_CLICKED); 
      } 
     return false;  
}

附图1.3

|结束

OK!现在你的UI就完全可以渲染到VideoPlay上面了:blush:

听叔一句劝:relieved:

此文到这按理说应该结束的,但是我还想啰嗦一句,确实VideoPlayer不是很好用, 「关注我,下节带你寻找代替它的方法!」

0

7赞

感谢分享!
ps: 图片都挂了,建议更新一下

是么,我电脑上显示正常呢

微信截图_20211105174246

已修改,谢谢~

感谢大佬的分享,6plus~

很难用,但是好像也就原生能找到合适的方案吧,其他的都苦哈哈看着了。。。

webview是个突破口,已经实践,还不错~

  1. 视频解析慢,原生表现极差,时常发生卡帧,阻碍正常渲染流程; 这个怎么破啊

下节会提到用 webview 的解决方案

战略性Mark!

这样做在小米某些机型上切后台或者锁屏有低概率出现屏幕残影的情况,有解决办法吗?

能直接渲染到精灵上面就牛批了

做了一版直接渲染到精灵上、不同的浏览器实现效果有些可用有些无效

接三方sdk,替换底层的播放器

大佬你好,webview的解决方案有了吗,求指教

大佬,在设置像素格式这一步骤出问题了,一加上glSurfaceView.getHolder().setFormat(PixelFormat.RGBA_8888);
这句代码后就会报错。
版本是2.4.7,
具体问题是这样的 videoplayer真机上无法播放视频

ios 怎么修改?

mark!!!