简介

videotrimmer是在OpenHarmony环境下，提供视频剪辑能力的三方库。

效果展示：

OpenHarmony多媒体-video_trimmer_多媒体

安装教程

ohpm install @ohos/videotrimmer
  • 1.

OpenHarmony ohpm环境配置等更多内容，请参考  如何安装OpenHarmony ohpm包 。

使用说明

目前支持MP4格式。

视频格式

是否支持

MP4

是

目前支持H264

编解码格式

是否支持

H264

是

使用VideoTrimmerView
  1. 构建VideoTrimmerOption对象:
.then(uint8 =>{
        let imageSource = image.createImageSource(uint8.buffer as any); // 步骤一：文件转为pixelMap 然后变换 给Image组件
        imageSource.createPixelMap().then(pixelmap => {
          this.videoTrimmerOption = {
            srcFilePath: this.filePath,
            listener:{
              onStartTrim: ()=>{
                console.log('dodo  开始裁剪')
                this.dialogController.open()
              },
              onFinishTrim:(path:string) => {
                console.log('dodo  裁剪成功 path='+path)
                this.outPath = path;
                this.dialogController.close()
              },
              onCancel:()=>{
                console.log('dodo  用户取消')
                router.replaceUrl({url:'pages/Index',params:{outFile: this.outPath}})
              }
            },
            loadFrameListener:{
              onStartLoad:()=>{
                console.log('dodo  开始获取帧数据')
                this.dialogController.open()
              },
              onFinishLoad:()=>{
                console.log('dodo  获取帧数据结束')
                this.dialogController.close()
              }
            },
            frameBackground: "#FF669900",
            framePlaceholder: pixelmap
          }
        })


      })
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  1. 界面build()中使用VideoTrimmerView组件，传入VideoTrimmerOption对象
build() {
    Row() {
      Column() {
        VideoTrimmerView( {videoTrimmerOption:$videoTrimmerOption})
      }
      .width('100%')
    }
    .height('100%')
  }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

接口说明

VideoTrimmerOption 视频剪辑选项

字段

描述

srcFilePath

视频源路径

listener

裁剪回调

loadFrameListener

加载帧回调

VIDEO_MAX_TIME

指定裁剪长度 默认值10秒

VIDEO_MIN_TIME

最小剪辑时间

MAX_COUNT_RANGE

seekBar的区域内一共有多少张图片

THUMB_WIDTH

裁剪视频预览长方形条状左右边缘宽度

PAD_LINE_WIDTH

裁剪视频预览长方形条状上下边缘高度

framePlaceholder

当加载帧没有完成，默认的占位图

frameBackground

裁剪视频预览长方形条状区域背景颜色

VideoTrimListener 视频剪辑回调

方法名

入参

接口描述

onStartTrim();

无

开始剪辑

onFinishTrim(outputFile:string);

outputFile:string

完成剪辑

onCancel();

无

取消剪辑

VideoLoadFramesListener 视频加载回调

方法名

入参

接口描述

onStartLoad();

无

开始加载视频帧

onFinishLoad();

无

完成加载视频帧

约束与限制

在下述版本验证通过：

DevEco Studio: 4.1 Canary2 (4.1.3.322), SDK: API11 (4.1.3.1)

HSP场景适配：

VideoTrimmerOption配置类新增可选参数context，在HSP场景下需要传入正确的context，才能保证三方库后续正确获取Resource资源。

非HSP场景不影响原功能，context可以不传。

目录结构

|----ohos_video_trimmer
|     |----entry  # 示例代码文件夹
			|----pages # 页面测试代码
				|----index.ets #测试入口页面
				|----Video.ets 		#剪辑主要测试页面
				|----FileUtils.ets	#工具类
|     |---- screenshots #截图
|     |---- videotrimmer  # video_trimmer库文件夹
|           |---- src  # video_trimmer库核心代码
				|----components
					 |----RangeSeekBarView.ets		#自定义组件，选定视频剪辑长度
					 |----TimeUtils.ets           #时间处理工具类
					 |----VideoLoadFramesListener.ets # 加载帧回调接口
					 |----VideoThumbListView.ets     #自定义组件，视频帧列表
					 |----VideoTrimListener.ets      # 视频剪辑回调接口
					 |----VideoTrimmerOption.ets     # 视频剪辑选项
					 |----VideoTrimmerView.ets       #自定义视频剪辑组件
|     |---- README.MD  # 安装使用方法
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.