如何自定义Video组件控制栏样式

【问题描述】
Video组件默认的控制栏样式太丑了，看了文档，没看到可以自定义样式选项呀。

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

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

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)
    
50. 
    
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.   }}
    

复制代码