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

花瓣小跑  金牌会员 | 2024-9-22 18:07:51 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 808|帖子 808|积分 2424

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

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

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



  • 普通本地视频。
    加载本地视频时，首先在本地rawfile目录指定对应的文件，如下图所示。

再使用资源访问符$rawfile()引用视频资源。
  1. @Component
  2. export struct VideoPlayer{
  3.    private controller:VideoController | undefined;
  4.    private previewUris: Resource = $r ('app.media.preview');
  5.    private videoSrc: string = 'dataability://device_id/com.domainname.dataability.videodata/video/10'
  6.    build(){
  7.      Column() {
  8.        Video({
  9.          src: this.videoSrc,
  10.          previewUri: this.previewUris,
  11.          controller: this.controller
  12.        })
  13.    }
  14. }
  15. }
复制代码


  • Data Ability 提供的视频路径带有dataability://前缀，使用时确保对应视频资源存在即可。
  1. @Component
  2. export struct VideoPlayer{
  3.    private controller:VideoController | undefined;
  4.    private previewUris: Resource = $r ('app.media.preview');
  5.    private videoSrc: string = 'dataability://device_id/com.domainname.dataability.videodata/video/10'
  6.    build(){
  7.      Column() {
  8.        Video({
  9.          src: this.videoSrc,
  10.          previewUri: this.previewUris,
  11.          controller: this.controller
  12.        })
  13.    }
  14. }
  15. }
复制代码
加载沙箱路径视频

支持file:///data/storage路径前缀的字符串，用于读取应用沙箱路径内的资源，需要包管应用沙箱目录路径下的文件存在并且有可读权限。
  1. @Component
  2. export struct VideoPlayer {
  3.   private controller: VideoController | undefined;
  4.   private videoSrc: string = 'file:///data/storage/el2/base/haps/entry/files/show.mp4'
  6.   build() {
  7.     Column() {
  8.       Video({
  9.         src: this.videoSrc,
  10.         controller: this.controller
  11.       })
  12.     }
  13.   }
  14. }
复制代码
加载网络视频

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

Video组件 属性 主要用于设置视频的播放情势。比方设置视频播放是否静音、播放是否显示控制条等。
  1. @Component
  2. export struct VideoPlayer {
  3.   private controller: VideoController | undefined;
  5.   build() {
  6.     Column() {
  7.       Video({
  8.         controller: this.controller
  9.       })
  10.         .muted(false) //设置是否静音
  11.         .controls(false) //设置是否显示默认控制条
  12.         .autoPlay(false) //设置是否自动播放
  13.         .loop(false) //设置是否循环播放
  14.         .objectFit(ImageFit.Contain) //设置视频适配模式
  15.     }
  16.   }
  17. }
复制代码
变乱调用

Video组件回调变乱主要为播放开始、暂停竣事、播放失败、播放停止、视频准备和操作进度条等变乱，除此之外，Video组件也支持通用变乱的调用，如点击、触摸等变乱的调用。具体变乱请参考 变乱说明 。
  1. @Entry
  2. @Component
  3. struct VideoPlayer{
  4.   private controller:VideoController | undefined;
  5.   private previewUris: Resource = $r ('app.media.preview');
  6.   private innerResource: Resource = $rawfile('videoTest.mp4');
  7.   build(){
  8.     Column() {
  9.       Video({
  10.         src: this.innerResource,
  11.         previewUri: this.previewUris,
  12.         controller: this.controller
  13.       })
  14.         .onUpdate((event) => {   //更新事件回调
  15.           console.info("Video update.");
  16.         })
  17.         .onPrepared((event) => {  //准备事件回调
  18.           console.info("Video prepared.");
  19.         })
  20.         .onError(() => {          //失败事件回调
  21.           console.info("Video error.");
  22.         })
  23.         .onStop(() => {          //停止事件回调
  24.           console.info("Video stoped.");
  25.         })
  26.     }
  27.   }
  28. }
复制代码
Video控制器使用

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


  • 默认控制器
    默认的控制器支持视频的开始、暂停、进度调整、全屏显示四项基本功能。
  1. @Entry
  2. @Component
  3. struct VideoGuide {
  4.   @State videoSrc: Resource = $rawfile('videoTest.mp4')
  5.   @State previewUri: string = 'common/videoIcon.png'
  6.   @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
  7.   build() {
  8.     Row() {
  9.       Column() {
  10.         Video({
  11.           src: this.videoSrc,
  12.           previewUri: this.previewUri,
  13.           currentProgressRate: this.curRate
  14.         })
  15.       }
  16.       .width('100%')
  17.     }
  18.     .height('100%')
  19.   }
  20. }
复制代码


  • 自界说控制器
    使用自界说的控制器，先将默认控制器关闭掉，之后可以使用button以及slider等组件进行自界说的控制与显示，得当自界说较强的场景下使用。
  1. @Entry
  2. @Component
  3. struct VideoGuide1 {
  4.   @State videoSrc: Resource = $rawfile('videoTest.mp4')
  5.   @State previewUri: string = 'common/videoIcon.png'
  6.   @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
  7.   @State isAutoPlay: boolean = false
  8.   @State showControls: boolean = true
  9.   @State sliderStartTime: string = '';
  10.   @State currentTime: number = 0;
  11.   @State durationTime: number = 0;
  12.   @State durationStringTime: string ='';
  13.   controller: VideoController = new VideoController()
  15.   build() {
  16.     Row() {
  17.       Column() {
  18.         Video({
  19.           src: this.videoSrc,
  20.           previewUri: this.previewUri,
  21.           currentProgressRate: this.curRate,
  22.           controller: this.controller
  23.         }).controls(false).autoPlay(true)
  24.         .onPrepared((event)=>{
  25.           if(event){
  26.             this.durationTime = event.duration
  27.           }
  28.         })
  29.         .onUpdate((event)=>{
  30.           if(event){
  31.             this.currentTime =event.time
  32.           }
  33.         })
  34.         Row() {
  35.           Text(JSON.stringify(this.currentTime) + 's')
  36.           Slider({
  37.             value: this.currentTime,
  38.             min: 0,
  39.             max: this.durationTime
  40.           })
  41.           .onChange((value: number, mode: SliderChangeMode) => {
  42.               this.controller.setCurrentTime(value);
  43.             }).width("90%")
  44.           Text(JSON.stringify(this.durationTime) + 's')
  45.         }
  46.         .opacity(0.8)
  47.         .width("100%")
  48.       }
  49.       .width('100%')
  50.     }
  51.     .height('40%')
  52.   }
  53. }
复制代码
其他说明

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

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

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


第二阶段：鸿蒙南北双向高工技能基础：gitee.com/MNxiaona/733GH


第三阶段：应用开发中高级就业技术


第四阶段：全网首发-工业级南向设备开发就业技术：gitee.com/MNxiaona/733GH


《鸿蒙 (Harmony OS)开发学习手册》（共计892页）

如何快速入门？

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识:gitee.com/MNxiaona/733GH

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私掩护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共变乱与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.背景任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙开发面试真题（含参考答案）:gitee.com/MNxiaona/733GH


鸿蒙入门教学视频：


美团APP实战开发教学：gitee.com/MNxiaona/733GH


写在末了



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

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

花瓣小跑

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表