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

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

介绍

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

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

效果预览

使用说明

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

实现思路

1. 自定义构建水印组件；

  WatermarkBuilder() {
    Column() {
      ···
    }
    .width('auto')
    .height('auto')
    .hitTestBehavior(HitTestMode.None)
  }

2. 利用Video属性.overlay为视频添加水印，通过x、y大小设置水印添加的位置；

    .overlay(this.WatermarkBuilder(), {
      offset: {
        x: -100,
        y: 490
      }
    })

3. 添加视频的播放、暂停、倍速等功能。

    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)
    ···