介绍
本示例介绍了Video组件和@ohos.window接口实现媒体全屏的功能。 该场景多用于首页瀑布流媒体播放等。
效果图预览
使用说明:
- 点击全屏按钮,横屏媒体窗口。
- 点击恢复窗口按钮,恢复媒体窗口。
实现步骤
- 在Video组件内调用 onFullscreenChange 方法,实现媒体全屏效果。
Video({
src: $rawfile(this.moment.media),
previewUri: $r(`app.media.${this.moment.mediaPreview}`)
})
.width($r('app.integer.friendMomentsPage_single_video_width'))
.height($r('app.integer.friendMomentsPage_single_video_height'))
.objectFit(ImageFit.Contain)
.onFullscreenChange(() => {
// 横竖屏切换
this.windowChange(this.isFullscreen);
})
- 调用@ohos.window的 getLastWindow 方法获取当前应用内最上层的子窗口,若无应用子窗口,则返回应用主窗口。
- 利用获取到的窗口对象,调用 setWindowSystemBarEnable 方法设置窗口是否显示导航栏和状态栏。
- 调用窗口对象的 setPreferredOrientation 方法设置窗口旋转方向以及是否应用重力感应。
window.getLastWindow(getContext(), (err: BusinessError, data) => {
const errCode = err.code;
if (errCode) {
return;
}
// 设置窗口是否显示导航栏和状态栏
data.setWindowSystemBarEnable(WINDOW_SYSTEM_BAR);
// 设置窗口旋转方向以及是否应用重力感应
data.setPreferredOrientation(window.Orientation.PORTRAIT);
})
高性能知识点
- 本示例使用了LazyForEach 进行数据懒加载优化,以降低内存占用和渲染开销。
- 本示例使用了@Reusable复用组件优化,提升应用性能。
工程结构&模块类型
mediafullscreen // har
|---model
| |---BasicDataSource.ets // 数据类型文件
|---view
| |---MediaFullscreen.ets // 媒体全屏实现页面
模块依赖
不涉及
参考资料
最后分享一份鸿蒙(HarmonyOS)开发学习指南需要的可以扫码免费领取!!!
![](https://i-blog.csdnimg.cn/blog_migrate/da4ee4d1a87a41ca6d862314bb1a9685.png)
第一章 快速入门
1、开发准备
2、构建第一个ArkTS应用(Stage模型)
3、构建第一个ArkTS应用(FA模型)
4、构建第一个JS应用(FA模型)
5、…
第二章 开发基础知识
1、应用程序包基础知识
2、应用配置文件(Stage模型)
3、应用配置文件概述(FA模型)
4、…
第三章 资源分类与访问
1、 资源分类与访问
2、 创建资源目录和资源文件
3、 资源访问
4、…
第四章 学习ArkTs语言
1、初识ArkTS语言
2、基本语法
3、状态管理
4、其他状态管理
5、渲染控制
6、…
第五章 UI开发
1.方舟开发框架(ArkUI)概述
2.基于ArkTS声明式开发范式
3.兼容JS的类Web开发范式
4…
第六章 Web开发
1.Web组件概述
2.使用Web组件加载页面
3.设置基本属性和事件
4.在应用中使用前端页面JavaScript
5.ArkTS语言基础类库概述
6.并发
7…
11.网络与连接
12.电话服务
13.数据管理
14.文件管理
15.后台任务管理
16.设备管理
17…
第七章 应用模型
1.应用模型概述
2.Stage模型开发指导
3.FA模型开发指导
4…