HarmonyOS 鸿蒙Next 视频横竖屏处理

发布于 1周前 作者 eggper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 视频横竖屏处理

短视频播放,横竖屏失败的,不正常,可能是什么原因????

2 回复

参考demo如下:

import { window } from '[@kit](/user/kit).ArkUI';

[@Entry](/user/Entry)

[@Component](/user/Component)

struct VideoPlayerPage {

  controller: VideoController = new VideoController();

  [@State](/user/State) curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X

  [@State](/user/State) fullHeight: Length = 300

  [@State](/user/State) isFullVertical: boolean = false

  [@State](/user/State) isFullHorizontal: boolean = false

  [@State](/user/State) setHeight:Length = 300

  onPageHide(): void {

    this.handlerOrientation(window.Orientation.PORTRAIT)

    this.controller.requestFullscreen(true)

  }

  handlerOrientation(type: number) {

    window.getLastWindow(getContext(this), (err, win) => {

      win.setPreferredOrientation(type)

    })

  }

  build() {

    Column() {

      Stack({ alignContent: Alignment.Bottom }) {

        Video({

          //竖版视频和横版视频的显示效果不同

          src: $rawfile('videoDemo.mp4'),

          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

              this.fullHeight = this.setHeight

            } 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

                this.fullHeight = this.setHeight

              }

            }).fontColor(Color.White)

        }

        .zIndex(1)

      }

    }

    .width('100%')

    .height('100%')

    .justifyContent(FlexAlign.Center)

  }

}

更多关于HarmonyOS 鸿蒙Next 视频横竖屏处理的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在处理HarmonyOS(鸿蒙)Next系统中的视频横竖屏问题时,首先需要确保你的应用已经正确配置了屏幕方向的处理逻辑。HarmonyOS提供了丰富的API接口来管理屏幕方向,开发者可以通过以下方式来实现视频横竖屏的处理:

  1. 配置文件设置:在config.json中,可以指定应用的默认屏幕方向(如横屏或竖屏)。对于视频播放功能,若需支持动态切换,则需通过代码逻辑控制。

  2. 编程接口调用:利用HarmonyOS的显示管理API,如setRequestedOrientation方法,可以在运行时动态改变屏幕方向。调用此方法时需传入目标方向参数,如Orientation.LANDSCAPE(横屏)或Orientation.PORTRAIT(竖屏)。

  3. 事件监听:为设备方向变化添加监听器,当用户旋转设备时,应用可以捕捉到这一事件并作出响应,如调整视频播放器的布局和方向。

  4. 适配与优化:确保在不同屏幕方向下,视频播放界面能够良好适配,无拉伸或变形现象,同时保持用户交互的一致性。

如果上述方法已正确实施但问题依旧没法解决,请联系官网客服。官网地址是:https://www.itying.com/category-93-b0.html。

回到顶部