HarmonyOS鸿蒙Next中视频打点功能，求救大佬！

HarmonyOS鸿蒙Next中视频打点功能，求救大佬！ 在鸿蒙开发中如何实现视频打点功能，就是我有个视频我需要进行播放，但是在播放的时候我会有一个异常帧，然后我需要把这个异常帧放到视频进度条中去。 在鸿蒙中怎么实现，求救大佬

3 回复

使用VideoController管理视频播放状态与进度，通过Slider组件实现可视化进度条→自定义进度条样式→叠加异常帧标记视图→支持点击标记跳转至对应时间点

// 异常帧时间点数组（数据）
@State private abnormalPoints: number[] = [30, 90, 150] 

// 当前播放时间
@State private currentTime: number = 0

// 视频总时长
private totalDuration: number = 0 

build() {
  Stack() {
    // 视频播放组件
    Video({
      src: '视频资源路径',
      controller: this.controller
    })
    .onPrepared(() => {
      this.totalDuration = this.controller.duration
    })
    .onTimeUpdate((event) => {
      this.currentTime = event.time
    })
    // 自定义进度条容器
    Column() {
      // 打点标记层
      Row()
        .width('100%')
        .height(20)
        .justifyContent(FlexAlign.Start)
        .position({ y: -12 })
        .children(
          this.abnormalPoints.map((time) => {
            Circle()
              .width(8)
              .height(8)
              .margin({ left: `${(time / this.totalDuration) * 100}%` })
              .fill(Color.Red)
              .onClick(() => {
                this.controller.seek(time)
              })
          })
        )
      // 进度条组件
      Slider({
        value: this.currentTime,
        min: 0,
        max: this.totalDuration
      })
      .onChange((value) => {
        this.controller.seek(value)
      })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中视频打点功能，求救大佬！的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


鸿蒙Next视频打点功能实现

鸿蒙Next中视频打点功能可通过AVPlayer的addMarker方法实现。具体步骤：

  1. 创建AVPlayer实例
  2. 调用addMarker设置时间点标记
  3. 监听onMarkerReached回调处理打点触发事件

关键代码示例：

let player = new media.AVPlayer();
player.addMarker(5000); // 5秒打点
player.on('markerReach', (timeMs) => {
  // 打点触发处理
});

需注意：

  1. 时间参数单位为毫秒
  2. 需在prepare后调用
  3. 单个player最多支持100个打点

在HarmonyOS Next中实现视频打点功能可以通过以下步骤完成：

  1. 使用VideoPlayer组件作为视频播放器基础
  2. 通过VideoPlayer的currentTime属性获取当前播放进度
  3. 在检测到异常帧时记录时间点

关键代码示例：

// 创建VideoPlayer
let videoPlayer = new VideoPlayer(this.context)
videoPlayer.src = '视频路径'

// 设置进度监听
videoPlayer.on('timeUpdate', (currentTime) => {
  // 实时获取播放进度
})

// 添加打点标记
function addMarker(timePoint: number) {
  // 创建标记点
  let marker = new VideoMarker()
  marker.time = timePoint
  marker.color = '#FF0000' // 红色标记
  
  // 添加到进度条
  videoPlayer.addMarker(marker)
}

// 检测到异常时调用
addMarker(异常时间点)

注意事项：

  • 异常检测建议放在on(‘frameUpdate’)回调中处理
  • 标记点支持自定义样式和点击事件
  • 可通过getMarkers()获取所有标记点

这种方法可以实现基本的视频打点功能，标记会显示在进度条上，用户点击标记可以跳转到对应时间点。

回到顶部