developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
zhanglun_wd
7ae36926 1 parent 40d6cb83

视频加载中动效

Inline Side-by-side
Showing 2 changed files with 93 additions and 44 deletions
... ... @@ -11,7 +11,9 @@ export struct PlayerProgressView {
@Consume isDragging: boolean
@Consume status: number
@State videoDuration: number = this.contentDetailData?.videoInfo?.[0]?.videoDuration || 1
@State loadingTop: number = 10
@State loadingWidth: number | string = 1
@State showLoading: boolean = false
aboutToAppear() {
if (this.playerController) {
this.playerController.onStatusChange = (status: number) => {
... ... @@ -20,55 +22,95 @@ export struct PlayerProgressView {
this.playerController.onSeekDone = (status: number) => {
this.playerController?.play()
}
this.playerController.onLoaded = (loaded: number) => {
if(loaded == 1) {
this.loadingWidth = '95%'
this.showLoading = true
} else {
this.loadingWidth = 1
this.showLoading = false
}
}
}
}
build() {
Column() {
Text() {
Span(DateTimeUtils.secondToTime(Math.floor(this.progressVal / 100 * this.videoDuration)))
Span(' / ')
Span(DateTimeUtils.secondToTime(this.videoDuration))
}
.fontSize(24)
.fontColor(Color.White)
.fontWeight(600)
.margin({ bottom: 30 })
.visibility(this.isDragging ? Visibility.Visible : Visibility.None)
/**
*
* loading 动效
*/
@Builder
playerLoadingBuilder() {
Slider({
value: this.progressVal,
step: 0.01,
// style: SliderStyle.OutSet
})
.blockColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? $r('app.color.play_block_color') :
Color.Transparent)
.trackColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ?
$r('app.color.pause_track_color') : $r('app.color.play_track_color'))
.selectedColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ?
$r('app.color.pause_selected_color') : $r('app.color.play_selected_color'))
.trackThickness(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? 4 : 1)
.blockStyle({
type: this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? SliderBlockType.IMAGE :
SliderBlockType.DEFAULT,
image: $r('app.media.ic_player_block')
})
.blockSize({ width: 18, height: 12 })
.width('100%')
.height(19)
.onChange((value: number, mode: SliderChangeMode) => {
this.progressVal = value
if (mode === SliderChangeMode.Moving) {
this.isDragging = true
}
if (mode === SliderChangeMode.End) {
this.isDragging = false
Flex({
direction: FlexDirection.Row,
justifyContent: FlexAlign.Center,
alignItems: ItemAlign.End
}) {
Text('')
.backgroundColor(Color.Gray)
.width(this.loadingWidth)
.height(1)
.animation({ duration: 500, curve: Curve.Ease, iterations: -1, playMode: PlayMode.Normal })
}
.width('100%')
.zIndex(2000)
.visibility(this.showLoading ? Visibility.Visible: Visibility.Hidden)
.margin({ bottom: 10 })
// .markAnchor({ x: 0, y: '100%' })
}
build() {
Stack() {
this.playerLoadingBuilder()
if(!this.showLoading) {
Column() {
Text() {
Span(DateTimeUtils.secondToTime(Math.floor(this.progressVal / 100 * this.videoDuration)))
Span(' / ')
Span(DateTimeUtils.secondToTime(this.videoDuration))
}
this.playerController?.setSeekTime(value, mode);
console.log('slider onChange:', value, mode)
.fontSize(24)
.fontColor(Color.White)
.fontWeight(600)
.margin({ bottom: 30 })
.visibility(this.isDragging ? Visibility.Visible : Visibility.None)
Slider({
value: this.progressVal,
step: 0.01,
// style: SliderStyle.OutSet
})
.blockColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? $r('app.color.play_block_color') :
Color.Transparent)
.trackColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ?
$r('app.color.pause_track_color') : $r('app.color.play_track_color'))
.selectedColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ?
$r('app.color.pause_selected_color') : $r('app.color.play_selected_color'))
.trackThickness(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? 4 : 1)
.blockStyle({
type: this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? SliderBlockType.IMAGE :
SliderBlockType.DEFAULT,
image: $r('app.media.ic_player_block')
})
.blockSize({ width: 18, height: 12 })
.width('100%')
.height(19)
.onChange((value: number, mode: SliderChangeMode) => {
this.progressVal = value
if (mode === SliderChangeMode.Moving) {
this.isDragging = true
}
if (mode === SliderChangeMode.End) {
this.isDragging = false
}
this.playerController?.setSeekTime(value, mode);
console.log('slider onChange:', value, mode)
})
})
}
.visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
}
}
.visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
}
}
\ No newline at end of file
... ...
... ... @@ -27,6 +27,7 @@ export class WDPlayerController {
private prepareTime:number = 0; //加载时间
private currentPlayTime:number = 0; //当前播放时间
public onVideoSizeChange?: (width: number, height: number) => void;
public onLoaded?: (loaded: number) => void;
public onTimeUpdate?: (position: number, duration: number) => void;
public onVolumeUpdate?: (volume: number) => void;
public continue?: () => void;
... ... @@ -86,6 +87,9 @@ export class WDPlayerController {
if (this.surfaceId) {
this.avPlayer.surfaceId = this.surfaceId;
}
if(this.onLoaded) {
this.onLoaded(1)
}
this.avPlayer?.prepare();
break;
... ... @@ -101,6 +105,9 @@ export class WDPlayerController {
}
break;
case AVPlayerStatus.PLAYING:
if(this.onLoaded) {
this.onLoaded(2)
}
this.setBright();
this.status = PlayerConstants.STATUS_START;
this.avPlayer!.videoScaleType = media.VideoScaleType.VIDEO_SCALE_TYPE_FIT
... ...