本示例介绍了@ohos.multimedia.media组件和@ohos.window接口以及使用触摸热区实现视频横竖屏切换及进度条热区拖动的功能。该场景多用于横竖屏视频等媒体播放。
使用说明:
async Init(): Promise<void> {
await this.release();
const context = getContext(this);
// 获取fdSrc用于注册AVPlayer
context.resourceManager.getRawFd(this.fileName).then(async (value: resourceManager.RawFileDescriptor) => {
this.avPlayer = await media.createAVPlayer();
this.isCreate = true;
this.setSourceInfo(); // 视频信息上报函数
this.setStateChangeCallback(); // 状态机上报回调函数
this.avPlayer.fdSrc = {
fd: value.fd,
offset: value.offset,
length: value.length
};
});
}
// TODO 知识点:XComponent和AVPlayer通过surfaceId绑定
setSurfaceID(): void {
logger.info('play video: surfaceID is:' + this.surfaceID);
this.avPlayer.surfaceId = this.surfaceID;
}
case 'prepared':
logger.info('state prepared called');
this.isPlaying = true; // 准备完成阶段 开始播放
this.totalDuration = this.avPlayer.duration; // 获取视频时长
this.aspect_ratio = this.avPlayer.width / this.avPlayer.height; // 获取视频宽高比
if(this.avPlayer.width >= this.avPlayer.height) { // 判断是横屏视频还是竖屏视频
this.verticalVideo = false;
} else {
this.verticalVideo = true;
}
this.getPlay();
break;
changeOrientation() {
// 获取UIAbility实例的上下文信息
let context = getContext(this);
// 调用该接口手动改变设备横竖屏状态(设置全屏模式,先强制横屏,再加上传感器模式)
window.getLastWindow(context).then((lastWindow) => {
if (this.isLandscape) {
// 设置窗口的布局是否为沉浸式布局
lastWindow.setWindowLayoutFullScreen(true, () => {
// 设置窗口全屏模式时导航栏、状态栏的可见模式
lastWindow.setWindowSystemBarEnable([]);
// 设置窗口的显示方向属性,AUTO_ROTATION_LANDSCAPE表示传感器自动横向旋转模式
lastWindow.setPreferredOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE);
});
} else {
// 设置窗口的显示方向属性,UNSPECIFIED表示未定义方向模式,由系统判定
lastWindow.setPreferredOrientation(window.Orientation.UNSPECIFIED, () => {
// 设置窗口全屏模式时导航栏、状态栏的可见模式
lastWindow.setWindowSystemBarEnable(WINDOW_SYSTEM_BAR, () => {
// 设置窗口的布局是否为沉浸式布局
lastWindow.setWindowLayoutFullScreen(false, () => {
setTimeout(() => {
// 设置退出全屏动画
animateTo({
duration: ANIMATE_DURATION,
onFinish: () => {
this.fileName = '';
}
}, () => {
this.isFullScreen = !this.isFullScreen;
});
}, TIMEOUT_DURATION);
});
});
});
}
});
}
欢迎大家关注公众号<程序猿百晓生>,可以了解到一下知识点。
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题(含参考答案)
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......
Row() {
// ...
Slider({
value: Math.round(this.currentTime / this.totalDuration * 100)
})
.onChange((value: number, mode: SliderChangeMode) => {
if (this.isCreate) {
this.currentTime = this.totalDuration * value / 100;
this.avPlayer.seek(this.currentTime);
if (mode === SliderChangeMode.Moving) {
if (this.avPlayer.state === 'playing') {
this.getPause();
}
} else if (mode === SliderChangeMode.End) {
if (this.avPlayer.state === 'paused' && this.isPlaying) {
this.getPlay();
}
}
}
})
// ...
}
.hitTestBehavior(HitTestMode.Transparent) // 将组件的触摸测试类型设置为自身和子节点都响应触摸测试,不会阻塞兄弟节点的触摸测试,不会影响祖先节点的触摸测试。
.responseRegion( // 设置多个触摸热区
[
{
x: 0,
y: 0,
width: $r('app.string.video_screen_direction_switching_layout_100'),
height: $r('app.string.video_screen_direction_switching_layout_100')
},
{
x: 0,
y: $r('app.string.video_screen_direction_switching_layout_negative_200'),
width: $r('app.string.video_screen_direction_switching_layout_100'),
height: $r('app.string.video_screen_direction_switching_layout_200')
}
]
)
.gesture( // 设置拖动手势,将距离变量与进度条变量进行绑定计算
PanGesture(new PanGestureOptions({
direction: PanDirection.Left | PanDirection.Right
}))
.onActionStart(() => {
this.flagValue = this.currentTime;
})
.onActionUpdate((event?: GestureEvent) => {
if (event) {
if (this.isCreate) {
if (this.avPlayer.state === 'playing') {
this.getPause();
}
this.currentTime = (this.flagValue + this.totalDuration * (event.offsetX / 3) / 100) > this.totalDuration ? this.totalDuration : (this.flagValue + this.totalDuration * (event.offsetX / 3) / 100);
}
}
})
.onActionEnd(() => {
if (this.isCreate) {
this.avPlayer.seek(this.currentTime);
if (this.avPlayer.state === 'paused' && this.isPlaying) {
this.getPlay();
}
}
})
)
videoscreendirectionswitching // har
|---component
| |---VideoComponent.ets // AVPlayer组件页面
|---model
| |---BasicDataSource.ets // 数据类型文件
|---util
| |---TimeTools.ets // 时间轴组件页面
|---view
| |---VideoScreenDirectionSwitching.ets // 视频横竖屏切换容器页面
如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。