HarmonyOS鸿蒙Next中视频播放器如何旋转屏幕
HarmonyOS鸿蒙Next中视频播放器如何旋转屏幕 视频如何横屏播放 如何控制某一个页面可以为横屏
1 回复
更多关于HarmonyOS鸿蒙Next中视频播放器如何旋转屏幕的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
看下这个代码:
import { window } from '@kit.ArkUI';
@Entry
@Component
struct VideoPlayerPage {
controller: VideoController = new VideoController();
@State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
@State fullHeight: Length = 600
@State isFullVertical: boolean = false
@State isFullHorizontal: boolean = false
onPageHide(): void {
this.handlerOrientation(window.Orientation.PORTRAIT)
}
handlerOrientation(type: number) {
window.getLastWindow(getContext(this), (err, win) => {
win.setPreferredOrientation(type)
})
}
build() {
Column() {
Stack({ alignContent: Alignment.Bottom }) {
Video({
src: $rawfile('goodsIntro.mp4'),
previewUri: $r('app.media.app_icon'),
currentProgressRate: this.curRate,
controller: this.controller
})
.width('100%')
.height(this.fullHeight)
.loop(false)
.objectFit(ImageFit.Contain)
.autoPlay(false)
.controls(false)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
Row() {
Text('播放').onClick(() => {
this.controller.start() // 开始播放
}).margin(5).fontColor(Color.White).fontSize(12)
Text('暂停').onClick(() => {
this.controller.pause() // 暂停播放
}).margin(5).fontColor(Color.White).fontSize(12)
Text('0.75X').onClick(() => {
this.curRate = PlaybackSpeed.Speed_Forward_0_75_X
}).margin(5).fontColor(Color.White).fontSize(12)
Text('1.0X').onClick(() => {
this.curRate = PlaybackSpeed.Speed_Forward_1_00_X
}).margin(5).fontColor(Color.White).fontSize(12)
Text('2.0').onClick(() => {
this.curRate = PlaybackSpeed.Speed_Forward_2_00_X
}).margin(5).fontColor(Color.White).fontSize(12)
Text(this.isFullVertical ? '退出竖屏' : '竖屏')
.margin(5)
.fontSize(12)
.onClick(() =>
{
if (this.isFullVertical) {
this.fullHeight = 600
} else {
this.fullHeight = '100%'
}
this.isFullVertical = !this.isFullVertical
}).fontColor(Color.White)
Text(this.isFullHorizontal ? '退出横屏' : '横屏')
.fontSize(12)
.onClick(() => {
this.isFullHorizontal = !this.isFullHorizontal
if (this.isFullHorizontal) {
this.handlerOrientation(window.Orientation.LANDSCAPE_INVERTED)
this.fullHeight = '100%'
} else {
this.handlerOrientation(window.Orientation.PORTRAIT)
this.fullHeight = 600
}
}).fontColor(Color.White)
}
.zIndex(1)
}
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
页面级别无法设置,
只能设置窗口级别的,
在页面的生命周期中添加旋转属性:
onPageShow(): void {
window.getLastWindow(getContext(this), (err, win) => {
win.setPreferredOrientation(window.Orientation.LANDSCAPE_INVERTED)
})
}
onPageHide(): void {
window.getLastWindow(getContext(this), (err, win) => {
win.setPreferredOrientation(window.Orientation.PORTRAIT)
})
}