OpenHarmony开发者论坛

标题: 如何自定义Video组件控制栏样式 [打印本页]
作者: mean    时间: 2023-10-31 10:05
标题: 如何自定义Video组件控制栏样式
【问题描述】
Video组件默认的控制栏样式太丑了，看了文档，没看到可以自定义样式选项呀。

【运行环境】
硬件：RK3568
ROM版本：Openharmony 3.2 Beta5
DevEvoStudio版本：
SDK版本：API 9


作者: westinyang    时间: 2023-10-31 11:14
[md]首先设置 .controls(false) 隐藏默认控制栏，定义 controller: VideoController = new VideoController()，在初始化Video组件的时候传递给controller属性，然后用ArkUI自定义一个控制栏布局，给自定义控制栏布局中的按钮添加相应的单击事件，分别调用this.controller.start()|pause()|stop()|requestFullscreen()...等接口控制视频组件

[/md]
作者: 清风明月    时间: 2023-11-9 09:38
1.通过设置属性controls为false关闭默认控制栏。
2.设置Video组件的controller。
3.通过ArkTS实现自定义的控制栏，并通过VideoController控制视频播放。
  1. // xxx.ets
  2. @Entry@Componentstruct VideoCreateComponent {
  3.   @State videoSrc: Resource = $rawfile('video1.mp4')
  4.   @State previewUri: Resource = $r('app.media.poster1')
  5.   @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
  6.   @State isAutoPlay: boolean = false
  7.   @State showControls: boolean = true
  8.   controller: VideoController = new VideoController()
  9.    build() {
  10.     Column() {
  11.       Video({
  12.         src: this.videoSrc,
  13.         previewUri: this.previewUri,
  14.         currentProgressRate: this.curRate,
  15.         controller: this.controller
  16.       }).width('100%').height(600)
  17.         .autoPlay(this.isAutoPlay)
  18.         .controls(this.showControls)
  19.         .onStart(() => {
  20.           console.info('onStart')
  21.         })
  22.         .onPause(() => {
  23.           console.info('onPause')
  24.         })
  25.         .onFinish(() => {
  26.           console.info('onFinish')
  27.         })
  28.         .onError(() => {
  29.           console.info('onError')
  30.         })
  31.         .onPrepared((e) => {
  32.           console.info('onPrepared is ' + e.duration)
  33.         })
  34.         .onSeeking((e) => {
  35.           console.info('onSeeking is ' + e.time)
  36.         })
  37.         .onSeeked((e) => {
  38.           console.info('onSeeked is ' + e.time)
  39.         })
  40.         .onUpdate((e) => {
  41.           console.info('onUpdate is ' + e.time)
  42.         })
  43.              Row() {
  44.         Button('src').onClick(() => {
  45.           this.videoSrc = $rawfile('video2.mp4') // 切换视频源
  46.         }).margin(5)
  47.         Button('previewUri').onClick(() => {
  48.           this.previewUri = $r('app.media.poster2') // 切换视频预览海报
  49.         }).margin(5)

  51.         Button('controls').onClick(() => {
  52.           this.showControls = !this.showControls // 切换是否显示视频控制栏
  53.         }).margin(5)
  54.       }
  55.        Row() {
  56.         Button('start').onClick(() => {
  57.           this.controller.start() // 开始播放
  58.         }).margin(5)
  59.         Button('pause').onClick(() => {
  60.           this.controller.pause() // 暂停播放
  61.         }).margin(5)
  62.         Button('stop').onClick(() => {
  63.           this.controller.stop() // 结束播放
  64.         }).margin(5)
  65.         Button('setTime').onClick(() => {
  66.           this.controller.setCurrentTime(10, SeekMode.Accurate) // 精准跳转到视频的10s位置
  67.         }).margin(5)
  68.       }
  69.        Row() {
  70.         Button('rate 0.75').onClick(() => {
  71.           this.curRate = PlaybackSpeed.Speed_Forward_0_75_X // 0.75倍速播放
  72.         }).margin(5)
  73.         Button('rate 1').onClick(() => {
  74.           this.curRate = PlaybackSpeed.Speed_Forward_1_00_X // 原倍速播放
  75.         }).margin(5)
  76.         Button('rate 2').onClick(() => {
  77.           this.curRate = PlaybackSpeed.Speed_Forward_2_00_X // 2倍速播放
  78.         }).margin(5)
  79.       }
  80.     }
  81.   }}
复制代码




欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/) Powered by Discuz! X3.5