鸿蒙NEXT开发-视频播放&绘图能力

最新推荐文章于 2025-04-01 10:30:46 发布

东林知识库

最新推荐文章于 2025-04-01 10:30:46 发布

阅读量963

点赞数 29

分类专栏：鸿蒙学习文章标签： harmonyos 华为音视频

本文链接：https://blog.youkuaiyun.com/weixin_51166786/article/details/145843460

版权

鸿蒙学习专栏收录该内容

49 篇文章

订阅专栏

注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙next的教学文档，大家感兴趣可以学习下

如果大家觉得博主文章写的好的话，可以点下关注，博主会一直更新鸿蒙next相关知识

1. 视频播放

1.1 视频播放基本介绍

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

Video提供构造参数 Video(value: VideoOptions)

VideoOptions对象包含参数src、currentProgressRate、previewUri、controller。其中，src指定视频播放源的路径，currentProgressRate用于设置视频播放倍速，previewUri指定视频未播放时的预览图片路径，controller设置视频控制器，用于自定义控制视频。

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

1.2 加载本地视频

加载本地视频时，首先在本地rawfile目录指定对应的文件

再使用资源访问符$rawfile()引用视频资源。

@Entry
  @Component
  struct VideoCase {

    build() {
      Column() {
        Video({
          src: $rawfile('04功能体检基础质量测试.mp4')
        }).width('100%')
          .height('50%')
      }
      .height('100%')
        .width('100%')
    }
  }

1.3 加载网络视频

加载网络视频时，需要申请权限ohos.permission.INTERNET

注意：网络视频地址是下载地址

@Entry
  @Component
  struct VideoCase {

    build() {
      Column() {
        Video({
          src: 'http://121.41.123.231:8888/f/df2d26723a7f4245ae57/?dl=1'
        }).width('100%')
          .height('50%')
      }
      .height('100%')
        .width('100%')
    }
  }

1.4 常用属性

@Entry
  @Component
  struct VideoCase {

    build() {
      Column() {
        Video({
          src: $rawfile('04功能体检基础质量测试.mp4')
        }).width('100%')
          .height('50%')
          .muted(false) //设置是否静音
          .controls(false) //设置是否显示默认控制条
          .autoPlay(false) //设置是否自动播放
          .loop(false) //设置是否循环播放
          .objectFit(ImageFit.Contain) //设置视频适配模式
      }
      .height('100%')
        .width('100%')
    }
  }

1.5 事件调用

@Entry
  @Component
  struct VideoCase {

    build() {
      Column() {
        Video({
          src: $rawfile('04功能体检基础质量测试.mp4')
        }).width('100%')
          .height('50%')
          .onUpdate((event) => {   //更新事件回调
            console.info("Video update.");
          })
          .onPrepared((event) => {  //准备事件回调
            console.info("Video prepared.");
          })
          .onError(() => {          //失败事件回调
            console.info("Video error.");
          })
          .onStop(() => {          //停止事件回调
            console.info("Video stoped.");
          })
      }
      .height('100%')
        .width('100%')
    }
  }

1.6 完整案例

@Entry
  @Component
  struct VideoCase {
    @State
    speed: number = 1
    controller: VideoController = new VideoController()
    build() {
      Row() {
        Tabs() {
          TabContent() {
            Column({ space: 20 }) {
              Video({
                controller: this.controller,
                currentProgressRate: this.speed,
                src: 'http://121.41.123.231:8888/f/df2d26723a7f4245ae57/?dl=1'
              })
                .width('100%')
                .aspectRatio(1.4)
              Slider({
                value: this.speed,
                min: 0.75,
                step: 0.25,
                max: 2,
                style: SliderStyle.InSet
              })
                .showSteps(true)
                .onChange(value => {
                  this.speed = value
                })
              Text(this.speed+"倍速").fontSize(14).textAlign(TextAlign.Center).width('100%')
              Row({ space: 20 }) {
                Button("播放")
                  .onClick(() => {
                    this.controller.start()
                  })
                Button("暂停")
                  .onClick(() => {
                    this.controller.pause()
                  })
                Button("移动进度")
                  .onClick(() => {
                    this.controller.setCurrentTime(30) // 单位为秒
                  })
                Button("结束")
                  .onClick(() => {
                    this.controller.stop()
                  })
              }
            }
            .width('100%')
          }.tabBar("在线视频")
          TabContent() {
            Video({
              src: $rawfile('04功能体检基础质量测试.mp4')
            })
              .width('100%')
              .aspectRatio(1.4)
          }
          .tabBar("本地视频")
        }
        .animationDuration(300)

      }
      .height('100%')
    }
  }

2. 绘图能力

2.1 基本介绍

鸿蒙提供画布组件，用于自定义绘制图形，叫Canvas。

ArkUI里面的画布和前端的Canvas的用法基本一致

使用方法

1. 放置Canvas组件-给宽和高

2. 初始化画笔对象 CanvasRenderingContext2D，将画笔对象作为构造参数传递给Canvas组件

3. 可以在Canvas的onReady事件中进行动态绘制

4. 绘制方法参考下面官方文档

官方文档地址：

文档中心