• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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