更多开源内容请访问：51CTO开源基础软件社区https://ost.51cto.com前言在鸿蒙应用项目中，需要自定义播放器（这里选择的js组件），发现自定义播放器的控制栏无法播放全屏功能，搜索了官方网站和百度都找不到答案，发现之前有博主写自定义播放器的时候，这个全屏问题作为遗留问题一直没有解决，只好想办法克服了，结果花了五六个小时才搞定。核心难点在自定义视频播放器的控制栏时，播放、暂停、进度条、时长显示、倍速等功能实现起来都很容易，但是当我们全屏时，我们发现问题来了。在做这些自定义功能的时候，一定要优先使用官方文档提供的API支持。下表是官方的API支持。从这里可以看出，只需要调用requestFullScreenapi就可以请求全屏播放，但是调用之后会发现自己定义的控制条无法显示。解决思路：想到的解决方案：（1）修改requestFullScreen方法底层源码，重新编译一个sdk。HarmonyOS上没有开源，就别想了。(2)会不会是全屏播放时控制条与视频的层级关系遮挡了自定义控制条不显示？结果通过z-index的各种设置，发现无法解决。放弃并改变其他想法。前两个一直困在依赖官方的requestFullScreen方法来进行全屏，思路有限，想不通如何继续围绕这个发现展开。所以我需要改变我的想法。不使用官方api怎么实现全屏？放弃内置api后，想到了实现播放器的全屏，能够显示和隐藏自定义控制栏。需要进行以下步骤：(1)将视频组件和自定义控件栏所在的div组件包裹在stack组件中进行布局。(2)在data中设置stack组件宽高所需的变量，半屏或全屏时会修改该值。(3)全屏时，需要先将屏幕切换为横屏，然后将stack组件的宽高设置为100%，还需要隐藏页面中的所有其他组件。切换半屏时，需要将屏幕切换回竖屏，然后将宽高设置为全屏前的值，并显示页面中的所有其他组件。这里也可以扩展，判断视频源的纵横比。如果宽度大于高度，则会切入横屏状态的全屏模式。如果宽度小于高度，则会在竖屏全屏模式下使用。(4)切换全屏还需要设置系统自带的状态栏隐藏，切换到半屏时显示状态栏。后面我会沿着这个思路寻找解决方案。步骤（1）和（2）非常简单，我就不过多介绍了。步骤（3）需要的一个核心技术点是找到一个横竖屏切换的api，然后查看官方的api文档，发现js没有横竖屏切换的api，那应该怎么办呢？我愿意？我必须再次放弃吗？不行，这个时候可以想想java有没有横竖屏切换的api。原来在java中是有的，如下：//切换横屏abilityContext.setDisplayOrientation(AbilityInfo.DisplayOrientation.LANDSCAPE);//切换竖屏abilityContext.setDisplayOrientation(AbilityInfo.DisplayOrientation.PORTRAIT);至此，大家应该知道怎么做了吧。可以使用js和java混合开发。关于混合开发的细节，本文不做详细说明。步骤(4)中显示和隐藏系统状态栏可以直接通过jsAPI实现，如下：windowClass.setFullScreen(!this.isFullScreen,(err,data)=>{if(err){console.error('开启全屏模式失败Cause:'+JSON.stringify(err));return;}console.info('开启全屏模式成功data:'+JSON.stringify(data));});同时，我们应该需要关闭应用自带的标题栏。这个只需要在config.json中添加如下配置即可。"module":{//..."metaData":{"customizeData":[{"name":"hwc-theme","value":"androidhwext:style/Theme.Emui.NoTitleBar"}]},//...}这里还有一个很重要的点要强调一下，就是我们会在data中设置各种变量来记录播放状态、进度、全屏状态等，在横竖屏切换时，默认会导致FA生命周期重绘，那么data中的所有变量都会被重新初始化，所以为了防止生命周期重绘，请务必在config.json中需要的FA中添加如下配置："abilities":[{"configChanges":["orientation"],//....}//....]最后附上半屏和全屏效果图：了解更多开源，请访问：51CTO开源基础软件社区https://ost.51cto.com。
