实现视频添加水印功能鸿蒙示例代码

鸿蒙场景化示例代码技术工程师
发布于 2025-2-28 17:15
3.0w浏览
0收藏

本文原创发布在华为开发者社区

介绍

本示例构建自定义水印组件,利用Video组件的属性为视频添加水印并附有视频播放、暂停、倍速等功能。

实现视频添加水印功能源码链接

效果预览

实现视频添加水印功能鸿蒙示例代码-鸿蒙开发者社区

使用说明

自定义修改水印组件,修改视频src即可对相关视频进行添加水平操作。

实现思路

  1. 自定义构建水印组件;
  WatermarkBuilder() {
    Column() {
      ···
    }
    .width('auto')
    .height('auto')
    .hitTestBehavior(HitTestMode.None)
  }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  1. 利用Video属性.overlay为视频添加水印,通过x、y大小设置水印添加的位置;
    .overlay(this.WatermarkBuilder(), {
      offset: {
        x: -100,
        y: 490
      }
    })
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  1. 添加视频的播放、暂停、倍速等功能。
    Button('start').onClick(() => {
      this.controller.start() // 开始播放
    }).margin(5)
    Button('pause').onClick(() => {
      this.controller.pause() // 暂停播放
    }).margin(5)
    Button('stop').onClick(() => {
      this.controller.stop() // 结束播放
    }).margin(5)
    Button('setTime').onClick(() => {
      this.controller.setCurrentTime(10, SeekMode.Accurate) // 精准跳转到视频的10s位置
    }).margin(5)
    ···
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

分类
收藏
回复
举报


回复
    相关推荐