OpenHarmony視頻播放器

作者“堅(jiān)果，華為云享專家，InfoQ簽約作者，潤(rùn)和軟件KOL專家，電子發(fā)燒友鴻蒙MVP，51CTO博客專家博主，阿里云博客專家，開(kāi)源項(xiàng)目gin-vue-admin成員之一

由于視頻資源在項(xiàng)目中使用較為頻繁，于是有了這個(gè)教程，本教程在最后也是實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的播放器。

效果預(yù)覽

Video

由于使用本地視頻文件會(huì)影響App的包大小，所以通常我們的視頻文件來(lái)源于網(wǎng)絡(luò)地址，需要在config或者module.json對(duì)應(yīng)的"abilities"中添加網(wǎng)絡(luò)使用權(quán)限ohos.permission.INTERNET。我是為了測(cè)試方便用的本地視頻，大家別嫌棄。

"abilities":[

{

"permissions": ["ohos.permission.INTERNET"],

}

]

在使用的時(shí)候一個(gè)VideoController對(duì)象可以控制一個(gè)或多個(gè)video。

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

controller: VideoController = new VideoController();

接口

declare interface VideoOptions {

src?: string | Resource;

?

currentProgressRate?: number | string | PlaybackSpeed;

previewUri?: string | PixelMap | Resource;

?

controller?: VideoController;

}

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

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

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

支持dataability://的路徑前綴，用于訪問(wèn)通過(guò)Data Ability提供的視頻路徑

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

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

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

這兒我需要將PlaybackSpeed和VideoController單獨(dú)拎出來(lái)做一個(gè)解釋。

PlaybackSpeed類型接口說(shuō)明

Speed_Forward_0_75_X	0.75倍速播放。
Speed_Forward_1_00_X	1倍速播放。
Speed_Forward_1_25_X	1.25倍速播放。
Speed_Forward_1_75_X	1.75倍速播放。
Speed_Forward_2_00_X	2倍速播放。
名稱	描述

declare

enum

PlaybackSpeed

{

?

Speed_Forward_0_75_X

,

?

Speed_Forward_1_00_X

,

?

Speed_Forward_1_25_X

,

?

?

Speed_Forward_1_75_X

,

?

Speed_Forward_2_00_X

,

}

VideoController

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

start() : void 開(kāi)始播放。

pause() : void 暫停播放。

stop() : void 停止播放。

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

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

exitFullscreen() : void 退出全屏。

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

setCurrentTime8+

setCurrentTime(value: number, seekMode: SeekMode)

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

參數(shù)

SeekMode8+類型接口說(shuō)明

?

declare enum SeekMode {

?

PreviousKeyframe,

?

?

NextKeyframe,

?

?

ClosestKeyframe,

?

Accurate,

}

?

Video屬性

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

詳細(xì)介紹

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

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

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

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

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

ImageFit枚舉說(shuō)明

名稱	描述
Cover	保持寬高比進(jìn)行縮小或者放大，使得圖片兩邊都大于或等于顯示邊界。
Contain	保持寬高比進(jìn)行縮小或者放大，使得圖片完全顯示在顯示邊界內(nèi)。
Fill	不保持寬高比進(jìn)行放大縮小，使得圖片填充滿顯示邊界。
None	保持原有尺寸顯示。通常配合objectRepeat屬性一起使用。
ScaleDown	保持寬高比顯示，圖片縮小或者保持不變。

事件

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ā)該事件，通過(guò)duration可以獲取視頻時(shí)長(zhǎng)，單位為秒(s)。

onSeeking(event?: { time: number }) => void 操作進(jìn)度條過(guò)程時(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。

表格

名稱	功能描述
onStart() => void	播放時(shí)觸發(fā)該事件。
onPause() => void	暫停時(shí)觸發(fā)該事件。
onFinish() => void	播放結(jié)束時(shí)觸發(fā)該事件。
onError() => void	播放失敗時(shí)觸發(fā)該事件。
onPrepared(event?: { duration: number }) => void	視頻準(zhǔn)備完成時(shí)觸發(fā)該事件，通過(guò)duration可以獲取視頻時(shí)長(zhǎng)，單位為秒(s)。
onSeeking(event?: { time: number }) => void	操作進(jìn)度條過(guò)程時(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

)

// 是否自動(dòng)播放

.

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)度條過(guò)程時(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%'

)

}

}

參考文檔

video

flex

名稱	描述
PreviousKeyframe	跳轉(zhuǎn)到前一個(gè)最近的關(guān)鍵幀。
NextKeyframe	跳轉(zhuǎn)到后一個(gè)最近的關(guān)鍵幀。
ClosestKeyframe	跳轉(zhuǎn)到最近的關(guān)鍵幀。
Accurate	精準(zhǔn)跳轉(zhuǎn)，不論是否為關(guān)鍵幀。

參數(shù)名	參數(shù)類型	必填	默認(rèn)值	參數(shù)描述
value	number	是	-	視頻播放進(jìn)度位置。
seekMode	SeekMode	是	-	跳轉(zhuǎn)模式。