关于openharmony:在DAYU200上实现OpenHarmony视频播放器

内容简介

本文介绍了如何应用 ArkUI 框架提供的 video 组件，实现一个具备繁难播放器。通过 VideoController 控制器来管制倍速、全屏、进度调节等性能。

因为应用本地视频文件会影响 App 的包大小，所以通常咱们的视频文件来源于网络地址，记得须要在 config 或者 module.json 对应的 ”abilities” 中增加网络应用权限 ohos.permission.INTERNET。

成果展现

增加权限（网络地址须要）

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

应用一个 VideoController 对象能够管制一个或多个 video。

// 一个 VideoController 对象能够管制一个或多个 video。controller: VideoController = new VideoController();  

接口

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

其中仅 src(视频播放源的门路)这个参数是必填的。
★反对本地视频门路和网络门路。
★反对在 resources 上面的 video 或 rawfile 文件夹里搁置媒体资源。
★反对 dataability:// 的门路前缀，用于拜访通过 Data Ability 提供的视频门路
currentProgressRate:number 视频播放倍速，反对 0.75、1.0、1.25、1.75、2.0。
previewUri:string 预览图片的门路，能够作为视频未播放时的封面。
controller:VideoController 控制器。一个 VideoController 对象能够管制一个或多个 video。如果须要通过代码管制视频的播放、暂停等，能够给 Video 组件设置这个参数，而后通过控制器的如下接口管制视频播放状态：
PlaybackSpeed 类型接口阐明

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

VideoController
一个 VideoController 对象能够管制一个或多个 video。
★start() : void 开始播放。
★pause() : void 暂停播放。
★stop() : void 进行播放。
★setCurrentTime(value: number, seekMode: SeekMode)指定视频播放的进度地位，并指定跳转模式。value 是进度，seekMode 是跳转模式
★requestFullscreen() : boolean() 申请全屏播放，true 是横屏，false 竖屏。
★exitFullscreen() : void 退出全屏。在这儿，我同样须要将 setCurrentTime 独自拎出 setCurrentTime8+setCurrentTime(value: number, seekMode: SeekMode)指定视频播放的进度地位，并指定跳转模式。
★参数
★SeekMode8+ 类型接口阐明

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

Video 属性

muted（是否静音）、autoPlay（自动播放）、controls（管制栏）、objectFit（显示模式）、loop（是否循环播放）。其中，objectFit 参数设置值为 ImageFit.Cover 则铺满整个容器。

具体介绍
.muted(boolean) 默认值 false 是否静音。
.autoPlay(boolean) 默认值 false 是否自动播放。
.controls(boolean) 默认值 true 管制视频播放的管制栏是否显示。
.loop(boolean) 是否单个视频循环播放。
.objectFit(ImageFit) 默认值 Cover 设置视频显示模式。ImageFit 有如下枚举值可选 ImageFit 枚举阐明

事件：
onStart() => void 播放时触发该事件。
onPause() => void 暂停时触发该事件。
onFinish() => void 播放完结时触发该事件。
onError() => void 播放失败时触发该事件。onFullscreenChange(event?: { fullscreen: boolean}) => void) 视频进入和退出全屏时触发该事件。
onPrepared(event?: { duration: number}) => void 视频筹备实现时触发该事件，通过 duration 能够获取视频时长，单位为秒(s)。
onSeeking(event?: { time: number}) => void 操作进度条过程时上报工夫信息，单位为 s。onSeeked(event?: { time: number}) => void 操作进度条实现后，上报播放工夫信息，单位为 s。
onUpdate(event?: { time: number}) => void 播放进度变动时触发该事件，单位为 s，更新工夫距离为 250ms。

残缺示例

@Entry  
@Component  
struct Index { 
  @State message: string = '视频预览' 
  @State previewUris: Resource = $r('app.media.openharmony'); // 预览封面 
  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) // 是否单个视频循环播放  
        .height("60%")  
        .onStart(() => { 
          // 播放时触发该事件 
          console.info('onStart'); 
        })  
        .onPause(() => { 
          // 暂停时触发该事件 
          console.info('onPause'); 
        })  
        .onFinish(() => {console.info('onFinish'); 
 
        })  
        .onError(() => { 
          // 播放失败时触发该事件 
          console.error('onError'); 
        })  
        .onFullscreenChange((e) => {console.info('视频进入和退出全屏时触发该事件：' + e.fullscreen) 
        })  
        .onPrepared((e) => {console.info('视频筹备实现时触发该事件：' + e.duration) 
        })  
        .onSeeking((e) => {console.info('操作进度条过程时上报工夫信息：' + e.time) 
        })  
        .onSeeked((e) => {console.info('操作进度条实现后，上报播放工夫信息：' + e.time) 
        })  
        .onUpdate((e) => {console.info('播放进度变动时触发该事件：' + 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("循环播放")  
            .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("指定视频播放的进度")  
            .onClick(() => {this.controller.setCurrentTime(9) 
            })  
        }  
      }  
    }  
    .width('100%').height('100%')  
  }  
}

总结

本文介绍了如何应用 ArkUI 框架提供的 video 组件，实现一个具备视频播放、倍速管制、进度调节的播放器。通过 VideoController 控制器来管制倍速、全屏、进度调节等性能。当然，除了文中分享的视频播放器样例，开发者还能够通过拓展其余相干属性和办法，实现更多好玩的样例。