README.md
1# 视频全屏切换案例
2
3### 介绍
4
5本示例介绍了[@ohos.multimedia.media](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/reference/apis-media-kit/js-apis-media.md)组件和[@ohos.window](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/reference/apis-arkui/js-apis-window.md)接口实现媒体全屏的功能。
6该场景多用于首页瀑布流媒体播放等。
7
8### 效果图预览
9
10<img src="./entry/src/main/resources/base/media/media_fullscreen.gif" width="300">
11
12**使用说明**：
13
14* 点击全屏按钮，横屏媒体窗口。
15* 点击恢复窗口按钮，恢复媒体窗口。
16
17## 实现步骤
18
191. 初始化[@ohos.multimedia.media](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/reference/apis-media-kit/js-apis-media.md)的AVPlayer。
20 ```ts
21 async init(): Promise<void> {
22 await this.release();
23 const context = getContext(this);
24 // 获取fdSrc用于注册AVPlayer
25 context.resourceManager.getRawFd(this.fileName).then(async (value: resourceManager.RawFileDescriptor) => {
26 this.avPlayer = await media.createAVPlayer();
27 this.isCreate = true;
28 this.setSourceInfo(); // 视频信息上报函数
29 this.setStateChangeCallback(); // 状态机上报回调函数
30 this.avPlayer.fdSrc = {
31 fd: value.fd,
32 offset: value.offset,
33 length: value.length
34 };
35 });
36 }
37 ```
382. 当AVPlayer初始化完毕进入initialized状态时，将XComponent和AVPlayer通过surfaceId绑定，这样可以在XComponent组件内实现视频播放功能。比起Video组件，AVPlayer可以更方便自定义全屏动画效果。
39 ```ts
40 // TODO 知识点：XComponent和AVPlayer通过surfaceId绑定
41 setSurfaceID(): void {
42 logger.info('play video: surfaceID is:' + this.surfaceID);
43 this.avPlayer.surfaceId = this.surfaceID;
44 }
45 ```
463. 使用显式动画[animateTo](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-explicit-animation.md)实现窗口放大效果。
47 ```ts
48 // 设置全屏播放展开动画
49 animateTo({
50 duration: ANIMATE_DURATION,
51 onFinish: () => {
52 this.isLandscape = !this.isLandscape; // 设置横屏
53 }
54 }, () => {
55 this.isFullScreen = !this.isFullScreen;
56 });
57 ```
584. 调用 @ohos.window 的 getLastWindow 方法获取当前应用内最上层的子窗口。若无应用子窗口，则返回应用主窗口。
59
605. 利用获取到的窗口对象，调用 setWindowSystemBarEnable 方法设置窗口是否显示导航栏和状态栏。
61
626. 调用窗口对象的 setPreferredOrientation 方法设置窗口旋转方向以及是否应用重力感应。
63
647. 调用窗口对象的setWindowLayoutFullScreen方法实现沉浸式布局。
65 ```ts
66 changeOrientation() {
67 // 获取UIAbility实例的上下文信息
68 let context = getContext(this);
69 // 调用该接口手动改变设备横竖屏状态（设置全屏模式，先强制横屏，再加上传感器模式）
70 window.getLastWindow(context).then((lastWindow) => {
71 if (this.isLandscape) {
72 // 设置窗口的布局是否为沉浸式布局
73 lastWindow.setWindowLayoutFullScreen(true, () => {
74 // 设置窗口全屏模式时导航栏、状态栏的可见模式
75 lastWindow.setWindowSystemBarEnable([]);
76 // 设置窗口的显示方向属性，AUTO_ROTATION_LANDSCAPE表示传感器自动横向旋转模式
77 lastWindow.setPreferredOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE);
78 });
79 } else {
80 // 设置窗口的显示方向属性，UNSPECIFIED表示未定义方向模式，由系统判定
81 lastWindow.setPreferredOrientation(window.Orientation.UNSPECIFIED, () => {
82 // 设置窗口全屏模式时导航栏、状态栏的可见模式
83 lastWindow.setWindowSystemBarEnable(WINDOW_SYSTEM_BAR, () => {
84 // 设置窗口的布局是否为沉浸式布局
85 lastWindow.setWindowLayoutFullScreen(false, () => {
86 setTimeout(() => {
87 // 设置退出全屏动画
88 animateTo({
89 duration: ANIMATE_DURATION,
90 onFinish: () => {
91 this.fileName = '';
92 }
93 }, () => {
94 this.isFullScreen = !this.isFullScreen;
95 });
96 }, TIMEOUT_DURATION);
97 });
98 });
99 });
100 }
101 });
102 }
103 ```
104### 高性能知识点
105
1061. 本示例使用了[LazyForEach](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-rendering-control-lazyforeach.md) 进行数据懒加载优化,以降低内存占用和渲染开销。
1072. 本示例使用了[@Reusable](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/quick-start/arkts-reusable.md)复用组件优化，提升应用性能。
108
109### 工程结构&模块类型
110
111 ```
112 mediafullscreen // har
113 |---model
114 | |---BasicDataSource.ets // 数据类型文件
115 |---util
116 | |---TimeTools.ets // 时间轴组件页面
117 |---view
118 | |---MediaFullscreen.ets // 媒体全屏容器页面
119 | |---XComponentVideo.ets // AVPlayer组件页面
120 ```
121
122### 参考资料
123
124显式动画[animateTo](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-explicit-animation.md)
125
126[LazyForEach](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-rendering-control-lazyforeach.md)
127
128[@ohos.multimedia.media](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/reference/apis-media-kit/js-apis-media.md)
129
130[@ohos.window](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/reference/apis-arkui/js-apis-window.md)
131
132[@Reusable](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/quick-start/arkts-reusable.md)
133
134### 依赖
135
136不涉及。
137
138### 约束与限制
139
1401.本示例仅支持标准系统上运行。
141
1422.本示例已适配API version 12版本SDK。
143
1443.本示例需要使用DevEco Studio 5.0.0 Release及以上版本才可编译运行。
145
146### 下载
147
148如需单独下载本工程，执行如下命令：
149
150```
151git init
152git config core.sparsecheckout true
153echo code/BasicFeature/Window/MediaFullScreen/ > .git/info/sparse-checkout
154git remote add origin https://gitee.com/openharmony/applications_app_samples.git
155git pull origin master
156```
157
