點(diǎn)擊藍(lán)字 ╳ 關(guān)注我們

開源項(xiàng)目 OpenHarmony是每個(gè)人的 OpenHarmony

徐建國

潤和軟件生態(tài)技術(shù)專家

以下內(nèi)容來自嘉賓分享，不代表開放原子開源基金會觀點(diǎn)

內(nèi)容簡介

本文介紹了如何使用ArkUI框架提供的video組件，實(shí)現(xiàn)一個(gè)具有簡易播放器。通過VideoController控制器來控制倍速、全屏、進(jìn)度調(diào)節(jié)等功能。

由于使用本地視頻文件會影響App的包大小，所以通常我們的視頻文件來源于網(wǎng)絡(luò)地址，記得需要在config或者module.json對應(yīng)的"abilities"中添加網(wǎng)絡(luò)使用權(quán)限ohos.permission.INTERNET。

效果展示

添加權(quán)限（網(wǎng)絡(luò)地址需要）

"abilities":[
{
"permissions":["ohos.permission.INTERNET"],
}
]

使用一個(gè)VideoController對象可以控制一個(gè)或多個(gè)video。

//一個(gè)VideoController對象可以控制一個(gè)或多個(gè)video。
controller:VideoController=newVideoController();

接口

declareinterfaceVideoOptions{
src?:string|Resource;
currentProgressRate?:number|string|PlaybackSpeed;
previewUri?:string|PixelMap|Resource;
controller?:VideoController;
}

其中僅src(視頻播放源的路徑)這個(gè)參數(shù)是必填的。

★支持本地視頻路徑和網(wǎng)絡(luò)路徑。

★支持在resources下面的video或rawfile文件夾里放置媒體資源。

★支持dataability://的路徑前綴，用于訪問通過Data Ability提供的視頻路徑

currentProgressRate:number視頻播放倍速，支持0.75、1.0、1.25、1.75、2.0。

previewUri:string預(yù)覽圖片的路徑，可以作為視頻未播放時(shí)的封面。

controller:VideoController控制器。一個(gè)VideoController對象可以控制一個(gè)或多個(gè)video。如果需要通過代碼控制視頻的播放、暫停等，可以給Video組件設(shè)置這個(gè)參數(shù)，然后通過控制器的如下接口控制視頻播放狀態(tài)：

PlaybackSpeed類型接口說明

declareinterfaceVideoOptions{
src?:string|Resource;
currentProgressRate?:number|string|PlaybackSpeed;
previewUri?:string|PixelMap|Resource;
controller?:VideoController;
}

VideoController

一個(gè)VideoController對象可以控制一個(gè)或多個(gè)video。

★start() : void開始播放。

★pause() : void暫停播放。

★stop() : void停止播放。

★setCurrentTime(value: number, seekMode: SeekMode)指定視頻播放的進(jìn)度位置，并指定跳轉(zhuǎn)模式。value是進(jìn)度，seekMode是跳轉(zhuǎn)模式

★requestFullscreen() : boolean()請求全屏播放，true是橫屏，false豎屏。

★exitFullscreen() : void退出全屏。

在這兒，我同樣需要將setCurrentTime單獨(dú)拎出

setCurrentTime8+

setCurrentTime(value: number, seekMode: SeekMode)

指定視頻播放的進(jìn)度位置，并指定跳轉(zhuǎn)模式。

★參數(shù)

★SeekMode8+類型接口說明

declareinterfaceVideoOptions{
src?:string|Resource;
currentProgressRate?:number|string|PlaybackSpeed;
previewUri?:string|PixelMap|Resource;
controller?:VideoController;
}

Video屬性

muted（是否靜音）、autoPlay（自動播放）、controls（控制欄）、objectFit（顯示模式）、loop（是否循環(huán)播放）。其中，objectFit參數(shù)設(shè)置值為ImageFit.Cover則鋪滿整個(gè)容器。

詳細(xì)介紹

.muted(boolean) 默認(rèn)值false是否靜音。

.autoPlay(boolean) 默認(rèn)值false是否自動播放。

.controls(boolean) 默認(rèn)值true控制視頻播放的控制欄是否顯示。

.loop(boolean) 是否單個(gè)視頻循環(huán)播放。

.objectFit(ImageFit) 默認(rèn)值Cover設(shè)置視頻顯示模式。ImageFit有如下枚舉值可選

ImageFit枚舉說明

事件：

onStart() => void播放時(shí)觸發(fā)該事件。

onPause() => void暫停時(shí)觸發(fā)該事件。

onFinish() => void播放結(jié)束時(shí)觸發(fā)該事件。

onError() => void播放失敗時(shí)觸發(fā)該事件。

onFullscreenChange(event?: { fullscreen: boolean }) => void) 視頻進(jìn)入和退出全屏?xí)r觸發(fā)該事件。

onPrepared(event?: { duration: number }) => void視頻準(zhǔn)備完成時(shí)觸發(fā)該事件，通過duration可以獲取視頻時(shí)長，單位為秒(s)。

onSeeking(event?: { time: number }) => void操作進(jìn)度條過程時(shí)上報(bào)時(shí)間信息，單位為s。

onSeeked(event?: { time: number }) => void操作進(jìn)度條完成后，上報(bào)播放時(shí)間信息，單位為s。

onUpdate(event?: { time: number }) => void播放進(jìn)度變化時(shí)觸發(fā)該事件，單位為s，更新時(shí)間間隔為250ms。

完整示例

@Entry  
@Component  
struct Index { 
  @State message: string = '視頻預(yù)覽' 
  @State previewUris: Resource = $r('app.media.openharmony'); //預(yù)覽封面 
  controller: VideoController = new VideoController(); 
  @State currentProgressRate: number = 1 
  @State muted: boolean = false 
  @State autoPlay: boolean = true 
  @State controls: boolean = true 
  @State startStatus: boolean = true 
  @State loop: boolean = true 
 
  aboutToAppear() { 
    this.controller.requestFullscreen(true) 
    this.controller.start() 
  }  
  
  build() { 
 
    Column() { 
      Text(this.message) 
        .fontSize(50) 
        .fontWeight(FontWeight.Bold) 
      Video({ 
        src: $r('app.media.video'), 
        previewUri: this.previewUris, // 視頻封面 
        currentProgressRate: this.currentProgressRate, // 視頻播放倍速 
        controller: this.controller, 
 
      })  
        .muted(this.muted) // 是否靜音  
        .autoPlay(this.autoPlay) // 是否自動播放  
        .controls(this.controls) // 控制視頻播放的控制欄是否顯示  
        .objectFit(ImageFit.Contain) // 視頻顯示模式  
        .loop(this.loop) // 是否單個(gè)視頻循環(huán)播放  
        .height("60%")  
        .onStart(() => { 
          // 播放時(shí)觸發(fā)該事件 
          console.info('onStart'); 
        })  
        .onPause(() => { 
          // 暫停時(shí)觸發(fā)該事件 
          console.info('onPause'); 
        })  
        .onFinish(() => { 
          console.info('onFinish'); 
 
        })  
        .onError(() => { 
          // 播放失敗時(shí)觸發(fā)該事件 
          console.error('onError'); 
        })  
        .onFullscreenChange((e) => { 
          console.info('視頻進(jìn)入和退出全屏?xí)r觸發(fā)該事件：' + e.fullscreen) 
        })  
        .onPrepared((e) => { 
          console.info('視頻準(zhǔn)備完成時(shí)觸發(fā)該事件：' + e.duration) 
        })  
        .onSeeking((e) => { 
          console.info('操作進(jìn)度條過程時(shí)上報(bào)時(shí)間信息：' + e.time) 
        })  
        .onSeeked((e) => { 
          console.info('操作進(jìn)度條完成后，上報(bào)播放時(shí)間信息：' + e.time) 
        })  
        .onUpdate((e) => { 
          console.info('播放進(jìn)度變化時(shí)觸發(fā)該事件：' + e.time) 
        })  
      Row({}) { 
        Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { 
          Button("播放") 
            .onClick(() => { 
              this.controller.start() 
            }).margin(8)  
          Button("暫停")  
            .onClick(() => { 
              this.controller.pause() 
            })  
          Button("循環(huán)播放")  
            .onClick(() => { 
              this.loop=!this.loop 
            })  
          Button("2倍速")  
            .onClick(() => { 
              this.currentProgressRate=2 
            })  
          Button("靜音")  
            .onClick(() => { 
              this.muted=!this.muted 
            })  
  
          Button("停止")  
            .onClick(() => { 
              this.controller.stop() 
            })  
  
          Button("全屏播放")  
            .onClick(() => { 
              this.controller.requestFullscreen(true) 
            })  
          Button("退出全屏")  
            .onClick(() => { 
              this.controller.exitFullscreen() 
            }).margin(8)  
  
          Button("控制欄是否顯示")  
            .onClick(() => { 
              this.controls = !this.controls 
            }).margin(8)  
  
          Button("指定視頻播放的進(jìn)度")  
            .onClick(() => { 
              this.controller.setCurrentTime(9) 
            })  
        }  
      }  
    }  
    .width('100%').height('100%')  
  }  
}

總結(jié)

本文介紹了如何使用ArkUI框架提供的video組件，實(shí)現(xiàn)一個(gè)具有視頻播放、倍速控制、進(jìn)度調(diào)節(jié)的播放器。通過VideoController控制器來控制倍速、全屏、進(jìn)度調(diào)節(jié)等功能。當(dāng)然，除了文中分享的視頻播放器樣例，開發(fā)者還可以通過拓展其他相關(guān)屬性和方法，實(shí)現(xiàn)更多好玩的樣例。