README.md
1# 短视频切换案例
2
3### 介绍
4
5本示例介绍了[@ohos.multimedia.media](https://gitee.com/openharmony/docs/blob/OpenHarmony-5.0.0-Release/zh-cn/application-dev/reference/apis-media-kit/js-apis-media.md)组件和[@ohos.window](https://gitee.com/openharmony/docs/blob/OpenHarmony-5.0.0-Release/zh-cn/application-dev/reference/apis-arkui/js-apis-window.md)接口以及使用[触摸热区](https://gitee.com/openharmony/docs/blob/OpenHarmony-5.0.0-Release/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-touch-target.md)实现视频横竖屏切换及进度条热区拖动的功能。
6该场景多用于横竖屏视频等媒体播放。
7
8### 效果图预览
9
10<img src="./entry/src/main/resources/base/media/video_screen_direction_switching.gif" width="300">
11
12**使用说明**：
13
14* 点击全屏观看按钮，切换横屏窗口。
15* 点击左上角返回按钮，恢复竖屏窗口。
16* 在进度条上方位置横向拖动可带动进度条移动。
17
18## 实现步骤
19
201. 初始化[@ohos.multimedia.media](https://gitee.com/openharmony/docs/blob/OpenHarmony-5.0.0-Release/zh-cn/application-dev/reference/apis-media-kit/js-apis-media.md)的AVPlayer。
21 ```ts
22 async Init(): Promise<void> {
23 await this.release();
24 const context = getContext(this);
25 // 获取fdSrc用于注册AVPlayer
26 context.resourceManager.getRawFd(this.fileName).then(async (value: resourceManager.RawFileDescriptor) => {
27 this.avPlayer = await media.createAVPlayer();
28 this.isCreate = true;
29 this.setSourceInfo(); // 视频信息上报函数
30 this.setStateChangeCallback(); // 状态机上报回调函数
31 this.avPlayer.fdSrc = {
32 fd: value.fd,
33 offset: value.offset,
34 length: value.length
35 };
36 });
37 }
38 ```
392. 当AVPlayer初始化完毕进入initialized状态时，将XComponent和AVPlayer通过surfaceId绑定，这样可以在XComponent组件内实现视频播放功能。比起Video组件，AVPlayer可以更方便自定义全屏动画效果。
40 ```ts
41 // TODO 知识点：XComponent和AVPlayer通过surfaceId绑定
42 setSurfaceID(): void {
43 logger.info('play video: surfaceID is:' + this.surfaceID);
44 this.avPlayer.surfaceId = this.surfaceID;
45 }
46 ```
473. 使用[AVPlayer](https://gitee.com/openharmony/docs/blob/OpenHarmony-5.0.0-Release/zh-cn/application-dev/reference/apis-media-kit/js-apis-media.md#avplayer9)中的width和height属性判断是横屏视频还是竖屏视频，方便判断是否需要展示**全屏观看**按钮。
48```ts
49 case 'prepared':
50 logger.info('state prepared called');
51 this.isPlaying = true; // 准备完成阶段 开始播放
52 this.totalDuration = this.avPlayer.duration; // 获取视频时长
53 this.aspect_ratio = this.avPlayer.width / this.avPlayer.height; // 获取视频宽高比
54 if(this.avPlayer.width >= this.avPlayer.height) { // 判断是横屏视频还是竖屏视频
55 this.verticalVideo = false;
56 } else {
57 this.verticalVideo = true;
58 }
59 this.getPlay();
60 break;
61```
624. 调用[@ohos.window](https://gitee.com/openharmony/docs/blob/OpenHarmony-5.0.0-Release/zh-cn/application-dev/reference/apis-arkui/js-apis-window.md)的 getLastWindow 方法获取当前应用内最上层的子窗口，若无应用子窗口，则返回应用主窗口。
635. 利用获取到的窗口对象，调用 setWindowSystemBarEnable 方法设置窗口是否显示导航栏和状态栏。
646. 调用窗口对象的 setPreferredOrientation 方法设置窗口旋转方向以及是否应用重力感应。
657. 调用窗口对象的setWindowLayoutFullScreen方法实现沉浸式布局。
66 ```ts
67 changeOrientation() {
68 // 获取UIAbility实例的上下文信息
69 let context = getContext(this);
70 // 调用该接口手动改变设备横竖屏状态（设置全屏模式，先强制横屏，再加上传感器模式）
71 window.getLastWindow(context).then((lastWindow) => {
72 if (this.isLandscape) {
73 // 设置窗口的布局是否为沉浸式布局
74 lastWindow.setWindowLayoutFullScreen(true, () => {
75 // 设置窗口全屏模式时导航栏、状态栏的可见模式
76 lastWindow.setWindowSystemBarEnable([]);
77 // 设置窗口的显示方向属性，AUTO_ROTATION_LANDSCAPE表示传感器自动横向旋转模式
78 lastWindow.setPreferredOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE);
79 });
80 } else {
81 // 设置窗口的显示方向属性，UNSPECIFIED表示未定义方向模式，由系统判定
82 lastWindow.setPreferredOrientation(window.Orientation.UNSPECIFIED, () => {
83 // 设置窗口全屏模式时导航栏、状态栏的可见模式
84 lastWindow.setWindowSystemBarEnable(WINDOW_SYSTEM_BAR, () => {
85 // 设置窗口的布局是否为沉浸式布局
86 lastWindow.setWindowLayoutFullScreen(false, () => {
87 setTimeout(() => {
88 // 设置退出全屏动画
89 animateTo({
90 duration: ANIMATE_DURATION,
91 onFinish: () => {
92 this.fileName = '';
93 }
94 }, () => {
95 this.isFullScreen = !this.isFullScreen;
96 });
97 }, TIMEOUT_DURATION);
98 });
99 });
100 });
101 }
102 });
103 }
104 ```
1058. 对进度条整个组件设置[触摸热区](https://gitee.com/openharmony/docs/blob/OpenHarmony-5.0.0-Release/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-touch-target.md)。
106 ```ts
107 Row() {
108 // ...
109 Slider({
110 value: Math.round(this.currentTime / this.totalDuration * 100)
111 })
112 .onChange((value: number, mode: SliderChangeMode) => {
113 if (this.isCreate) {
114 this.currentTime = this.totalDuration * value / 100;
115 this.avPlayer.seek(this.currentTime);
116 if (mode === SliderChangeMode.Moving) {
117 if (this.avPlayer.state === 'playing') {
118 this.getPause();
119 }
120 } else if (mode === SliderChangeMode.End) {
121 if (this.avPlayer.state === 'paused' && this.isPlaying) {
122 this.getPlay();
123 }
124 }
125 }
126 })
127 // ...
128 }
129 .hitTestBehavior(HitTestMode.Transparent) // 将组件的触摸测试类型设置为自身和子节点都响应触摸测试，不会阻塞兄弟节点的触摸测试，不会影响祖先节点的触摸测试。
130 .responseRegion( // 设置多个触摸热区
131 [
132 {
133 x: 0,
134 y: 0,
135 width: $r('app.string.video_screen_direction_switching_layout_100'),
136 height: $r('app.string.video_screen_direction_switching_layout_100')
137 },
138 {
139 x: 0,
140 y: $r('app.string.video_screen_direction_switching_layout_negative_200'),
141 width: $r('app.string.video_screen_direction_switching_layout_100'),
142 height: $r('app.string.video_screen_direction_switching_layout_200')
143 }
144 ]
145 )
146 .gesture( // 设置拖动手势，将距离变量与进度条变量进行绑定计算
147 PanGesture(new PanGestureOptions({
148 direction: PanDirection.Left | PanDirection.Right
149 }))
150 .onActionStart(() => {
151 this.flagValue = this.currentTime;
152 })
153 .onActionUpdate((event?: GestureEvent) => {
154 if (event) {
155 if (this.isCreate) {
156 if (this.avPlayer.state === 'playing') {
157 this.getPause();
158 }
159 this.currentTime = (this.flagValue + this.totalDuration * (event.offsetX / 3) / 100) > this.totalDuration ? this.totalDuration : (this.flagValue + this.totalDuration * (event.offsetX / 3) / 100);
160 }
161 }
162 })
163 .onActionEnd(() => {
164 if (this.isCreate) {
165 this.avPlayer.seek(this.currentTime);
166 if (this.avPlayer.state === 'paused' && this.isPlaying) {
167 this.getPlay();
168 }
169 }
170 })
171 )
172 ```
173
174### 高性能知识点
175
1761. 本示例使用了[LazyForEach](https://gitee.com/openharmony/docs/blob/OpenHarmony-5.0.0-Release/zh-cn/application-dev/quick-start/arkts-rendering-control-lazyforeach.md) 进行数据懒加载优化,以降低内存占用和渲染开销。
177
178### 工程结构&模块类型
179
180 ```
181 VideoSwitching // hap
182 |---component
183 | |---VideoComponent.ets // AVPlayer组件页面
184 |---model
185 | |---BasicDataSource.ets // 数据类型文件
186 |---pages
187 | |---Index.ets // 入口文件
188 |---util
189 | |---TimeTools.ets // 时间轴组件页面
190 |---view
191 | |---VideoScreenDirectionSwitching.ets // 视频横竖屏切换容器页面
192 ```
193
194### 参考资料
195
196[LazyForEach](https://gitee.com/openharmony/docs/blob/OpenHarmony-5.0.0-Release/zh-cn/application-dev/quick-start/arkts-rendering-control-lazyforeach.md)
197
198[@ohos.multimedia.media](https://gitee.com/openharmony/docs/blob/OpenHarmony-5.0.0-Release/zh-cn/application-dev/reference/apis-media-kit/js-apis-media.md)
199
200[@ohos.window](https://gitee.com/openharmony/docs/blob/OpenHarmony-5.0.0-Release/zh-cn/application-dev/reference/apis-arkui/js-apis-window.md)
201
202### 约束与限制
203
2041.本示例仅支持在标准系统上运行。
205
2062.本示例仅支持API12版本SDK，版本号：5.0.0.71。
207
2082.本示例需要使用DevEco Studio 5.0.0 Release 才可编译运行。
209
210### 下载
211
212如需单独下载本工程，执行如下命令：
213```typescript
214git init
215git config core.sparsecheckout true
216echo /code/BasicFeature/Media/VideoSwitching/ > .git/info/sparse-checkout
217git remote add origin https://gitee.com/openharmony/applications_app_samples.git
218git pull origin master
219```
