HarmonyOS 鸿蒙Next中VIdeo组件的组件化，获取视频时长和传输

HarmonyOS 鸿蒙Next中VIdeo组件的组件化，获取视频时长和传输

创建一个Player组件，并且该组件内使用Video组件，然后player组件内如何获取当前播放的视频时长，并在player组件中获取时长传递父组件就是在使用Pylayer组件的页面，在movie页面使用这个Player页面。

import CommonConstants from "../constants/CommonConstants"
import { emitter } from "@kit.BasicServicesKit";

@Component
export default struct Play {
  @Prop src: string;
  @Prop isControls: boolean = true;

  private videoController:VideoController = new VideoController();
  build() {
    Column() {
      /** Preview not available for this component */
      Video({
        src: this.src,
        controller: this.videoController
      })
        .loop(true)
        .objectFit(ImageFit.Cover)
        .autoPlay(true).controls(this.isControls)
        .onPrepared((event) => {
          // 发送事件到全局总线
          emitter.emit({
            eventId: 1, // 自定义事件ID
            priority: emitter.EventPriority.HIGH
          }, {
            data: { duration: event.duration } // 传递的时长数据
          });
        })
    }.width(CommonConstants.FULL_WIDTH)
    .height(CommonConstants.FULL_HEIGHT)
  }
}

更多关于HarmonyOS 鸿蒙Next中VIdeo组件的组件化，获取视频时长和传输的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，Video组件可通过duration属性获取视频时长。组件化开发时，使用<video>标签并绑定src属性传输视频源。时长获取需监听durationchange事件，示例：videoComponent.on('durationchange', (e) => { console.log(e.duration); })。视频传输支持网络URL或本地路径，网络传输需配置useNetWork属性。组件化封装时，可暴露getDuration()方法供外部调用。

更多关于HarmonyOS 鸿蒙Next中VIdeo组件的组件化，获取视频时长和传输的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，Video组件通过onPrepared事件可以获取视频时长。您的代码已经实现了基本功能，这里有几个关键点需要注意：

  1. 您使用了emitter进行组件间通信，这是正确的做法。事件总线适合跨组件通信，特别是父子组件不在同一层级的情况。

  2. 获取时机的处理：

  • onPrepared事件会在视频准备完成后触发，此时可以获取到准确的duration
  • 如果需要实时更新进度，可以结合onUpdate回调
  1. 父组件接收处理： 在父组件(movie页面)中需要注册对应的事件监听：
import { emitter } from "@kit.BasicServicesKit";

// 在aboutToAppear中注册
aboutToAppear() {
  emitter.on("1", (eventData) => {
    console.log("Received duration:" + eventData.data.duration);
    // 这里可以更新父组件的状态或执行其他操作
  });
}

// 记得在aboutToDisappear中取消注册
aboutToDisappear() {
  emitter.off("1");
}
  1. 性能考虑：
  • 高频事件(如进度更新)建议使用@Watch或@Link
  • 一次性数据(如时长)使用emitter是合适的

您的实现方式已经符合HarmonyOS的组件通信规范，可以正常工作。

回到顶部