鸿蒙HarmonyOS Next开发学习手册——视频播放 (Video)

花瓣小跑 发表于 2024-9-22 18:07:51

HarmonyOS Next开发学习手册——视频播放 (Video)

Video组件用于播放视频文件并控制其播放状态，常用于为短视频和应用内部视频的列表页面。当视频完整出现时会自动播放，用户点击视频区域则会暂停播放，同时显示播放进度条，通过拖动播放进度条指定视频播放到具体位置。具体用法请参考 Video 。
创建视频组件

Video通过调用接口来创建，接口调用情势如下：
Video(value: VideoOptions)
VideoOptions对象包含参数src、currentProgressRate、previewUri、controller。其中，src指定视频播放源的路径，加载方式请参考加载视频资源，currentProgressRate用于设置视频播放倍速，previewUri指定视频未播放时的预览图片路径，controller设置视频控制器，用于自界说控制视频。具体用法请参考 VideoOptions对象说明。
加载视频资源

Video组件支持加载本地视频和网络视频。
加载本地视频

[*] 普通本地视频。
加载本地视频时，首先在本地rawfile目录指定对应的文件，如下图所示。
https://i-blog.csdnimg.cn/blog_migrate/58b9b355858c987a46f07d66dd6438d0.png
再使用资源访问符$rawfile()引用视频资源。
@Component
export struct VideoPlayer{
private controller:VideoController | undefined;
private previewUris: Resource = $r ('app.media.preview');
private videoSrc: string = 'dataability://device_id/com.domainname.dataability.videodata/video/10'
build(){
Column() {
   Video({
      src: this.videoSrc,
      previewUri: this.previewUris,
      controller: this.controller
   })
}
}
}

[*]Data Ability 提供的视频路径带有dataability://前缀，使用时确保对应视频资源存在即可。
@Component
export struct VideoPlayer{
private controller:VideoController | undefined;
private previewUris: Resource = $r ('app.media.preview');
private videoSrc: string = 'dataability://device_id/com.domainname.dataability.videodata/video/10'
build(){
Column() {
   Video({
      src: this.videoSrc,
      previewUri: this.previewUris,
      controller: this.controller
   })
}
}
}
加载沙箱路径视频

支持file:///data/storage路径前缀的字符串，用于读取应用沙箱路径内的资源，需要包管应用沙箱目录路径下的文件存在并且有可读权限。
@Component
export struct VideoPlayer {
private controller: VideoController | undefined;
private videoSrc: string = 'file:///data/storage/el2/base/haps/entry/files/show.mp4'

build() {
Column() {
   Video({
   src: this.videoSrc,
   controller: this.controller
   })
}
}
}
加载网络视频

加载网络视频时，需要申请权限ohos.permission.INTERNET，具体申请方式请参考声明权限。此时，Video的src属性为网络视频的链接。
@Component
export struct VideoPlayer{
private controller:VideoController | undefined;
private previewUris: Resource = $r ('app.media.preview');
private videoSrc: string= 'https://www.example.com/example.mp4' // 使用时请替换为实际视频加载网址
build(){
Column() {
   Video({
   src: this.videoSrc,
   previewUri: this.previewUris,
   controller: this.controller
   })
}
}
}
添加属性

Video组件属性主要用于设置视频的播放情势。比方设置视频播放是否静音、播放是否显示控制条等。
@Component
export struct VideoPlayer {
private controller: VideoController | undefined;

build() {
Column() {
   Video({
   controller: this.controller
   })
   .muted(false) //设置是否静音
   .controls(false) //设置是否显示默认控制条
   .autoPlay(false) //设置是否自动播放
   .loop(false) //设置是否循环播放
   .objectFit(ImageFit.Contain) //设置视频适配模式
}
}
}
变乱调用

Video组件回调变乱主要为播放开始、暂停竣事、播放失败、播放停止、视频准备和操作进度条等变乱，除此之外，Video组件也支持通用变乱的调用，如点击、触摸等变乱的调用。具体变乱请参考变乱说明。
@Entry
@Component
struct VideoPlayer{
private controller:VideoController | undefined;
private previewUris: Resource = $r ('app.media.preview');
private innerResource: Resource = $rawfile('videoTest.mp4');
build(){
Column() {
   Video({
   src: this.innerResource,
   previewUri: this.previewUris,
   controller: this.controller
   })
   .onUpdate((event) => { //更新事件回调
      console.info("Video update.");
   })
   .onPrepared((event) => {//准备事件回调
      console.info("Video prepared.");
   })
   .onError(() => {       //失败事件回调
      console.info("Video error.");
   })
   .onStop(() => {       //停止事件回调
      console.info("Video stoped.");
   })
}
}
}
Video控制器使用

Video控制器主要用于控制视频的状态，包括播放、暂停、停止以及设置进度等，具体使用请参考 VideoController使用说明。

[*] 默认控制器
默认的控制器支持视频的开始、暂停、进度调整、全屏显示四项基本功能。
@Entry
@Component
struct VideoGuide {
@State videoSrc: Resource = $rawfile('videoTest.mp4')
@State previewUri: string = 'common/videoIcon.png'
@State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
build() {
Row() {
   Column() {
   Video({
      src: this.videoSrc,
      previewUri: this.previewUri,
      currentProgressRate: this.curRate
   })
   }
   .width('100%')
}
.height('100%')
}
}

[*] 自界说控制器
使用自界说的控制器，先将默认控制器关闭掉，之后可以使用button以及slider等组件进行自界说的控制与显示，得当自界说较强的场景下使用。
@Entry
@Component
struct VideoGuide1 {
@State videoSrc: Resource = $rawfile('videoTest.mp4')
@State previewUri: string = 'common/videoIcon.png'
@State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
@State isAutoPlay: boolean = false
@State showControls: boolean = true
@State sliderStartTime: string = '';
@State currentTime: number = 0;
@State durationTime: number = 0;
@State durationStringTime: string ='';
controller: VideoController = new VideoController()

build() {
Row() {
   Column() {
   Video({
      src: this.videoSrc,
      previewUri: this.previewUri,
      currentProgressRate: this.curRate,
      controller: this.controller
   }).controls(false).autoPlay(true)
   .onPrepared((event)=>{
      if(event){
         this.durationTime = event.duration
      }
   })
   .onUpdate((event)=>{
      if(event){
         this.currentTime =event.time
      }
   })
   Row() {
      Text(JSON.stringify(this.currentTime) + 's')
      Slider({
         value: this.currentTime,
         min: 0,
         max: this.durationTime
      })
      .onChange((value: number, mode: SliderChangeMode) => {
         this.controller.setCurrentTime(value);
         }).width("90%")
      Text(JSON.stringify(this.durationTime) + 's')
   }
   .opacity(0.8)
   .width("100%")
   }
   .width('100%')
}
.height('40%')
}
}
其他说明

Video组件已经封装好了视频播放的基础能力，开发者无需进行视频实例的创建，视频信息的设置获取，只需要设置数据源以及基础信息即可播放视频，相对扩展能力较弱。如果开发者想自界说视频播放，请参考媒体系统播放音视频。
鸿蒙全栈开发全新学习指南

为了积极培养鸿蒙生态人才，让各人都能学习到鸿蒙开发最新的技术，针对一些在职人员、0基础小白、应届生/盘算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线【包含了大厂APP实战项目开发】。
本路线共分为四个阶段：

第一阶段：鸿蒙初中级开发必备技能

https://i-blog.csdnimg.cn/blog_migrate/25ffee0c08f3e3b6a285cdfd3bcf8b52.png#pic_center
第二阶段：鸿蒙南北双向高工技能基础：gitee.com/MNxiaona/733GH

https://i-blog.csdnimg.cn/blog_migrate/d40e254ad5298b1b9443673b5d2d65e8.png
第三阶段：应用开发中高级就业技术

https://i-blog.csdnimg.cn/blog_migrate/12a1f73ec20d4dbfb00e81a12a8a3b80.png
第四阶段：全网首发-工业级南向设备开发就业技术：gitee.com/MNxiaona/733GH

https://i-blog.csdnimg.cn/blog_migrate/4edc4135ad5e9589f07294c309fa6ceb.png
《鸿蒙 (Harmony OS)开发学习手册》（共计892页）

如何快速入门？

1.基本概念
2.构建第一个ArkTS应用
3.……
https://i-blog.csdnimg.cn/blog_migrate/95c9d69bf2799d495b48ef0afdc3a6c3.png
开发基础知识:gitee.com/MNxiaona/733GH

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私掩护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
https://i-blog.csdnimg.cn/blog_migrate/8a3c814f160a417762a1604f1100519b.png
基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共变乱与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.背景任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
https://i-blog.csdnimg.cn/blog_migrate/a7814f4329840186e6587683eb60ad61.png
鸿蒙开发面试真题（含参考答案）:gitee.com/MNxiaona/733GH

https://i-blog.csdnimg.cn/blog_migrate/94175dfdc325a7ecd433aded1955becc.png
鸿蒙入门教学视频：

https://i-blog.csdnimg.cn/blog_migrate/38afbec31737974e20ce0f81a3bf6bae.png
美团APP实战开发教学：gitee.com/MNxiaona/733GH

https://i-blog.csdnimg.cn/blog_migrate/b2f662b1d4999c82896fb019422e345d.png
写在末了

[*]如果你以为这篇内容对你还蛮有帮助，我想约请你帮我三个小忙：
[*]点赞，转发，有你们的『点赞和批评』，才是我创造的动力。
[*]关注小编，同时可以期待后续文章ing

页: [1]

ToB企服应用市场:ToB评测及商务社交产业平台's Archiver

HarmonyOS Next开发学习手册——视频播放 (Video)