写点什么

在 DAYU200 上实现 OpenHarmony 视频播放器

  • 2022-10-14
    上海
  • 本文字数:3598 字

    阅读完需:约 12 分钟

在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 控制器来控制倍速、全屏、进度调节等功能。当然,除了文中分享的视频播放器样例,开发者还可以通过拓展其他相关属性和方法,实现更多好玩的样例。


用户头像

OpenHarmony开发者官方账号 2021-12-15 加入

OpenHarmony是由开放原子开源基金会(OpenAtom Foundation)孵化及运营的开源项目,目标是面向全场景、全连接、全智能时代,基于开源的方式,搭建一个智能终端设备操作系统的框架和平台,促进万物互联产业的繁荣发展

评论

发布
暂无评论
在DAYU200上实现OpenHarmony视频播放器_OpenHarmony_OpenHarmony开发者社区_InfoQ写作社区