【HarmonyOS NEXT】List中的播放器组件如何全屏播放

 【关键字】

List / 播放器 / 全屏

【问题描述】

List中的一个组件是一个播放器，点击全屏的时候如何让播放器全屏？

【解决方案】

video组件自带全屏接口requestFullscreen。

参考文档地址：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-media-components-video-0000001815927640#ZH-CN_TOPIC_0000001815927640__requestfullscreen

该全屏的原理是：新建一个video节点，设置为窗口大小，并将这个Video组件设置在根节点，复用原来Video组件的surface。可以通过ArkUI Inspector观察Video组件全屏前后页面节点布局变化。该方法不支持ets侧手动实现。且使用video组件自带的全屏后，video会页面占据最上层，会导致原本其他设置在Video组件上方的其他自定义组件被遮盖不展示。

横屏实现旋转屏幕示例代码如下：

// 改变设备横竖屏状态函数
private changeOrientation(isLandscape: boolean,isReserve?:boolean) {

// 获取UIAbility实例的上下文信息
let context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
// 调用该接口手动改变设备横竖屏状态
window.getLastWindow(context).then((lastWindow) => {
if (isLandscape) {
lastWindow.setPreferredOrientation(window.Orientation.LANDSCAPE).then(() => {
lastWindow.setPreferredOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE)
.then(() => {
WindowClassManager.getInstance().setsStatusBarEnable(false);
})
})
} else {
lastWindow.setPreferredOrientation(window.Orientation.PORTRAIT)
.then(() => {
WindowClassManager.getInstance().setsStatusBarEnable(true);
});
}
});
this.showTitle = isLandscape;
}

如果是使用XComponent做的播放器，示例代码如下：

/*
* Copyright (c) Huawei Technologies Co., Ltd. 2024-2024. All rights reserved.
*/
import window from '@ohos.window';
@Entry
@Component
struct QuanPin {
@State show:boolean = true;
// XComponent的控制器
private mXComponentController: XComponentController = new XComponentController();
// XComponent宽度
@State xComponentWidth:number|string = 0;
// XComponent高度
@State xComponentHeight:number|string = 0;
@State isFull:boolean = false;// 默认非全屏
// 设置窗口方向
setR(orientation:number){
window.getLastWindow(getContext(this)).then((win) => {
win.setPreferredOrientation(orientation).then((data) => {
console.log('setWindowOrientation: '+orientation+' Succeeded. Data: ' + JSON.stringify(data));
}).catch((err:string) => {
console.log('setWindowOrientation: Failed. Cause: ' + JSON.stringify(err));
});
}).catch((err:string) => {
console.log( 'setWindowOrientation： Failed to obtain the top window. Cause: ' + JSON.stringify(err));
});
}
aboutToAppear(){
this.xComponentWidth = '100%';
this.xComponentHeight = '40%';
window.getLastWindow(getContext(this)).then((win) => {
// 监听屏幕尺寸变化，变化后修改XComponent的宽高
win.on('windowSizeChange', (size) => {
console.log('windowSizeChange:'+JSON.stringify(size));
// 全屏时宽高占满屏幕
if(this.isFull){
this.xComponentWidth = px2vp(size.width);
this.xComponentHeight = px2vp(size.height);
}else{
// 非全屏时宽度100%，高度40%
this.xComponentWidth = px2vp(size.width);
this.xComponentHeight = '40%';
}
})
})
}
playVideo(){
}
build() {
Stack({ alignContent: Alignment.TopStart }){
Row() {
XComponent({
id: 'componentId',
type: 'surface',
controller: this.mXComponentController
})
.width(this.xComponentWidth)
.height(this.xComponentHeight)
.backgroundColor(Color.Black)
.onLoad(() => {
this.playVideo();
})
}
Button('横竖屏切换').onClick(()=>{
// 全屏时，横变竖
if(this.isFull){
this.setR(1);
this.isFull = false;
}else{// 非全屏时，竖变横
this.isFull = true;
this.setR(4);
}
}).position({x:0,y:0}).backgroundColor(Color.Green)
}.width('100%').height('100%').backgroundColor(Color.Red)
}
}