HarmonyOS 鸿蒙Next video 组件自定义控制器布局问题

发布于 1周前 作者 sinazl 最后一次编辑是 5天前 来自 鸿蒙OS

1、使用 stack 或其他组件把控制布局盖在 video 上方

2、调用 this.videoController.requestFullscreen(true) 导致除 video 之外的其他全部组件被隐藏 如下:

import { window } from '@kit.ArkUI'

@Entry

@Component

struct Index {

  private videoController = new VideoController()

  @State videoSrc: string = ""

  @State videoPre: string = ""

  private lastWindow: window.Window | undefined = undefined

  aboutToAppear(): void {

    window.getLastWindow(getContext()).then((lastWindow) => {

      this.lastWindow = lastWindow

    })

  }

  build() {

    Column() {

      Stack() {

        Video({

          controller: this.videoController,

          src: this.videoSrc,

          previewUri: this.videoPre

        })

          .controls(false)

          .autoPlay(true)

        Row() {

          Image($r("app.media.app_icon"))

            .width(40)

            .height(40)

            .onClick(() => {

              this.lastWindow?.setPreferredOrientation(window.Orientation.LANDSCAPE)

              this.videoController.requestFullscreen(true)

            })

        }

        .width("100%")

      }

      .width("100%")

      .height(500)

      .alignContent(Alignment.BottomStart)

    }

    .width("100%")

    .height("100%")

  }

}

更多关于HarmonyOS 鸿蒙Next video 组件自定义控制器布局问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

VideoController调用requestFullscreen开启全屏播放后，这边的video自带的全屏功能不能自定义设置控件。针对VideoController调用requestFullscreen开启全屏播放后，这边的video自带的全屏功能不能自定义设置控件这个问题，可以给视频展示区一个高度，通过调整尺寸实现全屏的效果，同时也可以显示自定义的播放控件

[@Entry](/user/Entry)
[@Component](/user/Component)
struct VideoPlayerPage {
  [@State](/user/State) videoSrc: Resource = $rawfile('videoTest.mp4')
  [@State](/user/State) previewUri: Resource = $r('app.media.background');
  controller: VideoController = new VideoController();
  [@State](/user/State) curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
  [@State](/user/State) fullHeight: Length = 600
  [@State](/user/State) isFullScreen: boolean = false

build() {
Column() {
Stack({ alignContent: Alignment.Bottom }) {
Video({ src: this.videoSrc, previewUri: this.previewUri, controller: this.controller })
.width(‘100%’)
.height(this.fullHeight)
.loop(false)
.objectFit(ImageFit.Contain)
.autoPlay(false)
.controls(false)
// 自定义控制器
Row() {
Text(‘start’)
.onClick(() => {
this.controller.start() // 开始播放
})
.margin(5)
.fontColor(Color.White)
Text(‘pause’)
.onClick(() => {
this.controller.pause() // 暂停播放
}).margin(5)
.fontColor(Color.White)
Text(‘0.75’)
.onClick(() => {
this.curRate = PlaybackSpeed.Speed_Forward_0_75_X // 0.75倍速播放
})
.margin(5)
.fontColor(Color.White)
Text(‘1’)
.onClick(() => {
this.curRate = PlaybackSpeed.Speed_Forward_1_00_X // 原倍速播放
})
.margin(5)
.fontColor(Color.White)
Text(‘2’)
.onClick(() => {
this.curRate = PlaybackSpeed.Speed_Forward_2_00_X // 2倍速播放
})
.margin(5)
.fontColor(Color.White)
Text(this.isFullScreen ? ‘退出全屏’ : ‘全屏’)
.onClick(() => {
if (this.isFullScreen) {
this.fullHeight = 600
} else {
this.fullHeight = ‘100%’
}
this.isFullScreen = !this.isFullScreen
})
.fontColor(Color.White)
}
.zIndex(1)
}
}
.width(‘100%’)
.height(‘100%’)
.justifyContent(FlexAlign.Center)
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

更多关于HarmonyOS 鸿蒙Next video 组件自定义控制器布局问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS 鸿蒙Next video 组件自定义控制器布局问题，以下提供直接解决方案：

在鸿蒙系统中，若需自定义视频组件的控制器布局，需利用鸿蒙提供的自定义布局能力。首先，确保已在XML布局文件中定义了一个能够容纳自定义控制器的容器，例如DirectionalLayout或StackLayout。

接着，在对应的JavaScript或TypeScript逻辑代码中，通过获取该容器的引用，动态添加或移除自定义的控制器元素，如播放/暂停按钮、进度条、音量调节等。可利用鸿蒙提供的组件API，如video组件的controls属性设置为false，以隐藏默认控制器，从而完全掌控自定义控制器的显示与隐藏。

在添加自定义控制器元素时，注意为各元素绑定相应的事件监听器，如点击事件、滑动事件等，以实现播放控制、进度跳转、音量调节等功能。

若需在控制器布局中展示视频当前播放时间、总时长等信息，可通过视频组件的currentTime和duration属性获取，并在界面上进行动态更新。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部