0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看威廉希尔官方网站 视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙ArkUI开发-Video组件的使用

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-01-23 16:59 次阅读

概述

手机、平板或是智慧屏这些终端设备上,媒体功能可以算作是我们最常用的场景之一。无论是实现音频的播放、录制、采集,还是视频的播放、切换、循环,亦或是相机的预览、拍照等功能,媒体组件都是必不可少的。以视频功能为例,在应用开发过程中,我们需要通过ArkUI提供的Video组件为应用增加基础的视频播放功能。借助Video组件,我们可以实现视频的播放功能并控制其播放状态。常见的视频播放场景包括观看网络上的较为流行的短视频,也包括查看我们存储在本地的视频内容。

本文将结合《简易视频播放器(ArkTS)》这个Codelab,对Video组件的参数、属性及事件进行介绍,然后通过组件的属性调用和事件回调阐明Video组件的基本使用方法,最后结合Video组件使用过程中的常见问题讲解自定义控制器的使用。

Video组件用法介绍

Video组件参数介绍 Video组件的接口表达形式为:

  1. Video(value: {src?: string | Resource, currentProgressRate?: number | string |PlaybackSpeed, previewUri?: string |PixelMap | Resource, controller?: VideoController})

其中包含四个可选参数,src、currentProgressRate、previewUri和controller。

  • src表示视频播放源的路径,可以支持本地视频路径和网络路径。使用网络地址时,如https,需要注意的是需要在module.json5文件中申请网络权限。在使用本地资源播放时,当使用本地视频地址我们可以使用媒体库管理模块medialibrary来查询公共媒体库中的视频文件,示例代码如下:
import mediaLibrary from '@ohos.multimedia.mediaLibrary';
 
async queryMediaVideo() {
 let option = {
 // 根据媒体类型检索
 selections: mediaLibrary.FileKey.MEDIA_TYPE + '=?',
 // 媒体类型为视频
 selectionArgs: [mediaLibrary.MediaType.VIDEO.toString()]
  };
 let media = mediaLibrary.getMediaLibrary(getContext(this));
 // 获取资源文件
 const fetchFileResult = await media.getFileAssets(option);
 // 以获取的第一个文件为例获取视频地址
 let fileAsset = await fetchFileResult.getFirstObject();
 this.source = fileAsset.uri
}

为了方便功能演示,示例中媒体资源需存放在resources下的rawfile文件夹里。

  • currentProgressRate表示视频播放倍速,其参数类型为number,取值支持0.75,1.0,1.25,1.75,2.0,默认值为1.0倍速;
  • previewUri表示视频未播放时的预览图片路径;
  • controller表示视频控制器。

参数的具体描述如下表:

参数名参数类型必填
srcstringResource
currentProgressRatenumberstring
previewUristringPixelMap8+
controllerVideoController

说明

视频支持的规格是:mp4、mkv、webm、TS。 下面我们通过具体的例子来说明参数的使用方法,我们选择播放本地视频,视频未播放时的预览图片路径也为本地,代码实现如下:

@Component
export struct VideoPlayer {
 private source: string | Resource;
 private controller: VideoController;
 private previewUris: Resource = $r('app.media.preview');
  ...
 
 build() {
 Column() {
      Video({
 src: this.source,
 previewUri: this.previewUris,
 controller: this.controller
      })
        ...
      VideoSlider({ controller: this.controller })
    }
  }
}

效果如下:

Video组件属性介绍

除了支持组件的尺寸设置、位置设置等通用属性外,Video组件还支持是否静音、是否自动播放、控制栏是否显示、视频显示模式以及单个视频是否循环播放五个私有属性。

名称参数类型描述
mutedboolean是否静音。默认值:false
autoPlayboolean是否自动播放。默认值:false
controlsboolean控制视频播放的控制栏是否显示。默认值:true
objectFitImageFit设置视频显示模式。默认值:Cover
loopboolean是否单个视频循环播放。默认值:false

其中,objectFit 中视频显示模式包括Contain、Cover、Auto、Fill、ScaleDown、None 6种模式,默认情况下使用ImageFit.Cover(保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界),其他效果(如自适应显示、保持原有尺寸显示、不保持宽高比进行缩放等)可以根据具体使用场景/设备来进行选择。 在Codelab示例中体现了controls、autoplay和loop属性的配置,示例代码如下:

@Component
export struct VideoPlayer {
 private source: string | Resource;
 private controller: VideoController;
  ...
 build() {
 Column() {
      Video({
 controller: this.controller
      })
        .controls(false) //不显示控制栏 
        .autoPlay(false) // 手动点击播放 
        .loop(false) // 关闭循环播放 
        ...
    }
  }
}

效果如下:

Video组件回调事件介绍

Video组件能够支持常规的点击、触摸等通用事件,同时也支持onStart、onPause、onFinish、onError等事件,具体事件的功能描述见下表:

事件名称功能描述
onStart(event:() => void)播放时触发该事件。
onPause(event:() => void)暂停时触发该事件。
onFinish(event:() => void)播放结束时触发该事件。
onError(event:() => void)播放失败时触发该事件。
onPrepared(callback:(event?: { duration: number }) => void)视频准备完成时触发该事件,通过duration可以获取视频时长,单位为s。
onSeeking(callback:(event?: { time: number }) => void)操作进度条过程时上报时间信息,单位为s。
onSeeked(callback:(event?: { time: number }) => void)操作进度条完成后,上报播放时间信息,单位为s。
onUpdate(callback:(event?: { time: number }) => void)播放进度变化时触发该事件,单位为s,更新时间间隔为250ms。
onFullscreenChange(callback:(event?: { fullscreen: boolean }) => void)在全屏播放与非全屏播放状态之间切换时触发该事件

在Codelab中我们以更新事件、准备事件、失败事件以及点击事件为回调为例进行演示,代码实现如下:

Video({ ... })
  .onUpdate((event) = > {
 this.currentTime = event.time;
 this.currentStringTime = changeSliderTime(this.currentTime); //更新事件 
  })
  .onPrepared((event) = > {
    prepared.call(this, event); //准备事件 
  })
  .onError(() = > {
    prompt.showToast({
      duration: COMMON_NUM_DURATION, //播放失败事件 
      message: MESSAGE
    });
  ...
  })

其中,onUpdate更新事件在播放进度变化时触发,从event中可以获取当前播放进度,从而更新进度条显示事件,比如视频播放时间从24秒更新到30秒。onError事件在视频播放失败时触发,在CommonConstants.ets中定义了常量类MESSAGE,所以在视频播放失败时会显示“请检查网络”。

  1. const MESSAGE: string = '请检查网络'

自定义控制器的组成与实现

自定义控制器的组成

Video组件的原生控制器样式相对固定,当我们对页面的布局色调的一致性有所要求,或者在拖动进度条的同时需要显示其百分比进度时,原生控制器就无法满足需要了。如下图右侧的效果需要使用自定义控制器实现,接下来我们看一下自定义控制器的组成。

为了实现自定义控制器的进度显示等功能,我们需要通过Row容器实现控制器的整体布局,然后借由Text组件来显示视频的播放起始时间、进度时间以及视频总时长,最后通过滑动进度条Slider组件来实现视频进度条的效果,代码如下:

@Component
export struct VideoSlider {
  ...
 build() {
 Row(...) {
 Image(...)
 Text(...)
 Slider(...)
 Text(...)
    }
    ...
  }
}

自定义控制器的实现

自定义控制器容器内嵌套了视频播放时间Text组件、滑动器Slider组件以及视频总时长Text组件 3个横向排列的组件,其中Text组件在之前的基础组件课程中已经有过详细介绍,这里就不再进行赘述。需要强调的是两个Text组件显示的时长是由Slider组件的onChange(callback: (value: number, mode: SliderChangeMode) => void)回调事件来进行传递的,而Text组件的数值与视频播放进度数值value则是通过@Provide与 @Consume装饰器进行的数据联动,实现效果可见图片下方黑色控制栏部分,具体代码步骤及代码如下: 获取/计算视频时长

export function prepared(event) {
 this.durationTime = event.duration;
 let second: number = event.duration % COMMON_NUM_MINUTE;
 let min: number = parseInt((event.duration / COMMON_NUM_MINUTE).toString());
 let head = min < COMMON_NUM_DOUBLE ? `${ZERO_STR}${min}` : min;
 let end = second < COMMON_NUM_DOUBLE ? `${ZERO_STR}${second}` : second;
 this.durationStringTime = `${head}${SPLIT}${end}`;
  ...
};

设置进度条参数及属性

Slider({
 value: this.currentTime,
 min: 0,
 max: this.durationTime,
 step: 1,
 style: SliderStyle.OutSet
})
 .blockColor($r('app.color.white'))
 .width(STRING_PERCENT.SLIDER_WITH)
 .trackColor(Color.Gray)
 .selectedColor($r('app.color.white'))
 .showSteps(true)
 .showTips(true)
 .trackThickness(this.isOpacity ? SMALL_TRACK_THICK_NESS : BIG_TRACK_THICK_NESS)
 .onChange((value: number, mode: SliderChangeMode) = > {...})

计算当前进度播放时间及添加onUpdate回调 最后,在我们播放视频时还需要更新显示播放的时间进度,也就是左侧的Text组件。在视频开始播放前,播放时间默认为00:00,随着视频播放,时间需要不断更新为当前进度时间。所以左侧的Text组件我们不仅需要读取时间,还需要为其添加数据联动。这里,我们就是通过为Video组件添加onUpdate事件来实现的,在视频播放过程中会不断调用changeSliderTime方法获取当前的播放时间并进行计算及单位转化,从而不断刷新进度条的值,也就是控制器左侧的播放进度时间Text组件。

Video({...})
  ...
  .onUpdate((event) = > {
 this.currentTime = event.time;
 this.currentStringTime = changeSliderTime(this.currentTime)
  })
export function changeSliderTime(value: number): string {
 let second: number = value % COMMON_NUM_MINUTE;
 let min: number = parseInt((value / COMMON_NUM_MINUTE).toString());
 let head = min < COMMON_NUM_DOUBLE ? `${ZERO_STR}${min}` : min;
 let end = second < COMMON_NUM_DOUBLE ? `${ZERO_STR}${second}` : second;
 let nowTime = `${head}${SPLIT}${end}`;
 return nowTime;
};

指定视频播放进度及添加onChange事件回调 如需手动进行进度条的拖动,则需要在Slider组件中指定播放进度,并为Slider组件添加onChange事件回调。Slider滑动时就会触发该事件回调,从而实现将视频定位到进度条当前刷新位置,完成时长组件渲染与视频播放进度数据联动。

Slider({...})
 .onChange((value: number, mode: SliderChangeMode) = > {
 sliderOnchange.call(this, value, mode);
  })
export function sliderOnchange(value: number, mode: SliderChangeMode) {
 this.currentTime = parseInt(value.toString());
 this.controller.setCurrentTime(parseInt(value.toString()), SeekMode.Accurate);
  ...
};

到这里我们就实现了自定义控制器的构建,两个Text组件显示的时长是由Slider组件的onChange回调事件来进行传递的,而Text组件的数值与视频播放进度数值value则通过是onUpdate与onChange事件并借由@Provide @Consume装饰器进行的数据联动。

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 存储
    +关注

    关注

    13

    文章

    4298

    浏览量

    85808
  • 鸿蒙
    +关注

    关注

    57

    文章

    2345

    浏览量

    42822
收藏 人收藏

    评论

    相关推荐

    鸿蒙开发ArkUI-X基础知识:【ArkUI跨平台设计总体说明】

    本文档描述ArkUI开发框架跨平台运行能力相关的总体威廉希尔官方网站 方案。
    的头像 发表于 05-24 15:41 1545次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b><b class='flag-5'>ArkUI</b>-X基础知识:【<b class='flag-5'>ArkUI</b>跨平台设计总体说明】

    鸿蒙开发ArkUI-X基础知识:【ArkUI代码工程及构建介绍】

    ArkUI作为OpenHarmony的默认开发框架,在本项目(ArkUI-X)中需要做到一套代码同时支持多平台构建,所以会采取共仓开发的方式,部分仓直接指向OpenHarmony相关开
    的头像 发表于 05-25 16:45 2074次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b><b class='flag-5'>ArkUI</b>-X基础知识:【<b class='flag-5'>ArkUI</b>代码工程及构建介绍】

    鸿蒙开发OpenHarmony组件复用案例

    ) } }, item => item) } } } 本文主要是对鸿蒙开发基础当中的OpenHarmony威廉希尔官方网站 组件复用示例, 更多鸿蒙开发
    发表于 01-15 17:37

    鸿蒙开发-ArkUI 组件基础

    1 组件介绍 组件(Component)是界面搭建与显示的最小单位,HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI
    发表于 01-17 19:31

    鸿蒙开发-ArkUI框架实战【日历应用 】

    对于刚刚接触OpenHarmony应用开发开发者,最快的入门方式就是开发一个简单的应用,下面记录了一个日历应用的开发过程,通过日历应用的开发
    发表于 01-17 21:37

    鸿蒙开发实战-(ArkUI)List组件和Grid组件的使用

    一系列相同宽度的列表项,连续、多行呈现同类数据,例如图片和文本。常见的列表有线性列表(List列表)和网格布局(Grid列表): 为了帮助开发者构建包含列表的应用,ArkUI提供了List组件和Grid
    发表于 01-18 20:18

    编程小白也能快速掌握的ArkUI JS组件开发

    好评。特别是它的ArkUI JS组件在线预览功能,不但可以从中学习基础组件的使用,还可以在线体验一键预览的编译效果。 通过Playground在线体验,从前没有接触过编程的小白也可以分分钟掌握
    发表于 08-31 11:09

    ArkUI新能力,助力应用开发更便捷

    ArkUI是一套构建分布式应用的声明式UI开发框架。它具备简洁自然的UI信息语法、丰富的UI组件、多维的状态管理,以及实时界面预览等相关能力,帮助您提升应用开发效率,并能在多种设备上实
    发表于 02-15 11:40

    ArkUI新能力,助力应用开发更便捷

    作者:niulihua,华为ArkUI威廉希尔官方网站 专家;wanglei,华为ArkUI威廉希尔官方网站 专家 ArkUI是一套构建分布式应用的声明式UI开发框架。它具备简洁自然的UI信息语法、丰富的UI
    的头像 发表于 02-15 16:35 857次阅读

    鸿蒙ArkUI开发-Tabs组件的使用

    鸿蒙ArkUI开发-Tabs组件的使用
    的头像 发表于 01-19 16:01 1881次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>开发</b>-Tabs<b class='flag-5'>组件</b>的使用

    鸿蒙ArkUI开发实战:eTS版【笑话app】

    制作一款笑话app,使用ArkUI
    的头像 发表于 03-25 16:04 449次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>开发</b>实战:eTS版【笑话app】

    鸿蒙ArkUI实例:【自定义组件

    组件是 OpenHarmony 页面最小显示单元,一个页面可由多个组件组合而成,也可只由一个组件组合而成,这些组件可以是ArkUI
    的头像 发表于 04-08 10:17 632次阅读

    鸿蒙ArkUI:【从代码到UI显示的整体渲染流程】

    方舟开发框架(简称ArkUI)是鸿蒙开发的UI框架,提供如下两种开发范式,我们 **只学声明式开发
    的头像 发表于 05-13 16:06 904次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>:【从代码到UI显示的整体渲染流程】

    鸿蒙跨平台框架:【ArkUi-X】创建工程

    鸿蒙推出了鸿ArkUi-X 框架所以就写个文章分享一下
    的头像 发表于 05-13 17:48 935次阅读
    <b class='flag-5'>鸿蒙</b>跨平台框架:【<b class='flag-5'>ArkUi</b>-X】创建工程

    鸿蒙ArkUI-X跨平台威廉希尔官方网站 :【开发准备】

    本文档适用于ArkUI跨平台应用开发的初学者。通过开发环境搭建、应用工程创建、编译和运行,熟悉ArkUI跨平台应用开发基本流程。
    的头像 发表于 05-24 10:40 469次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>-X跨平台威廉希尔官方网站
:【<b class='flag-5'>开发</b>准备】