当前位置：首页 > article >正文

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

article 2025/2/27 8:27:08

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

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

1. 视频播放

1.1 视频播放基本介绍

1.2 加载本地视频

1.3 加载网络视频

1.4 常用属性

1.5 事件调用

1.6 完整案例

2. 绘图能力

2.1 基本介绍

2.2 接口方法

2.3 开发步骤

2.3.1 定义一个画布

2.3.2 定义一个画笔

2.3.3 画一个带边框的矩形

2.3.4 绘制一个带填充的矩形

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. 绘制方法参考下面官方文档

官方文档地址：

文档中心

2.2 接口方法

Canvas(context?: CanvasRenderingContext2D | DrawingRenderingContext)

2.3 开发步骤

2.3.1 定义一个画布

// 1、定义一个画布
Canvas().width('300').aspectRatio(1).backgroundColor('#ccc')

2.3.2 定义一个画笔

@Entry
  @Component
  struct Index {

  // 给画笔设置属性，实现抗锯齿处理
  setting = new RenderingContextSettings(true)
  // 2、画笔
  context = new CanvasRenderingContext2D(this.setting)

    build() {
      Column() {
        // 1、定义一个画布
        Canvas(this.context).width('300').aspectRatio(1).backgroundColor('#ccc')

      }
      .height('100%')
        .width('100%')
    }
  }

2.3.3 画一个带边框的矩形

@Entry
  @Component
  struct Index {

  // 给画笔设置属性，实现抗锯齿处理
  setting = new RenderingContextSettings(true)
  // 2、画笔
  context = new CanvasRenderingContext2D(this.setting)

    build() {
      Column({space:15}) {
        // 1、定义一个画布
        Canvas(this.context).width('300').aspectRatio(1).backgroundColor('#ccc')
          .onReady(()=>{
            // 准备就绪
            // 3、画一个带边框的矩形
            this.context.strokeRect(100,100,50,50)
          })

      }
      .height('100%')
        .width('100%')
        .justifyContent(FlexAlign.Center)
    }
  }

2.3.4 绘制一个带填充的矩形

@Entry
@Component
struct Index {
  // 给画笔设置属性，实现抗锯齿处理
  setting = new RenderingContextSettings(true)
  // 2、画笔
  context = new CanvasRenderingContext2D(this.setting)

  build() {
    Column({ space: 15 }) {
      // 1、定义一个画布
      Canvas(this.context).width('300').aspectRatio(1).backgroundColor('#ccc')
        .onReady(() => {
          // 准备就绪
          // 3、画一个带填充的矩形
          this.context.fillRect(100, 100, 100, 50)
        })

    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

查看全文

http://www.kler.cn/a/562894.html