HarmonyOS鸿蒙NEXT应用开发视频剪辑添加画中画demo,使用滑动和捏合手势、AVPlayer、XComponent如何实现？

HarmonyOS鸿蒙NEXT应用开发视频剪辑添加画中画demo,使用滑动和捏合手势、AVPlayer、XComponent如何实现？

3 回复

参考文档：视频剪辑-添加画中画

更多关于HarmonyOS鸿蒙NEXT应用开发视频剪辑添加画中画demo,使用滑动和捏合手势、AVPlayer、XComponent如何实现？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


实现鸿蒙NEXT视频画中画功能需使用AVPlayer进行视频播放控制，XComponent承载视频渲染层。通过Gesture组件的PanGesture（滑动）和PinchGesture（捏合）手势识别实现画中画窗口的拖拽移动和缩放变换。AVPlayer绑定XComponent的SurfaceProvider输出视频画面，手势事件实时更新XComponent的位置与尺寸属性，完成交互操作。

在HarmonyOS NEXT中实现画中画视频剪辑功能，可以通过以下步骤结合AVPlayer、XComponent和手势操作完成：

  1. 使用AVPlayer加载视频
    创建两个AVPlayer实例分别加载主视频和画中画视频，通过AVPlayer.createAVPlayer()初始化并设置视频源。

  2. 通过XComponent渲染视频画面
    利用XComponent的Native Window能力获取Surface，将AVPlayer的视频输出绑定到Surface上。画中画视频需要叠加到主视频之上，通过调整XComponent的位置和大小实现。

  3. 处理手势交互

    • 滑动手势：通过PanGesture识别拖拽操作，动态更新画中画XComponent的坐标（x、y）。
    • 捏合手势：通过PinchGesture检测缩放，调整画中画XComponent的宽高比例，同时限制最小/最大尺寸以避免异常比例。

  4. 控制播放同步
    使用AVPlayer的播放状态回调（如on(‘playbackStateChange’)）确保主视频和画中画视频的播放进度同步，必要时通过seek()调整对齐。

  5. 性能优化
    手势操作需结合帧率控制，避免频繁刷新导致卡顿。建议使用异步方式更新UI，并在手势结束后统一提交位置/尺寸变更。

代码示例（简要逻辑）：

// 初始化AVPlayer和XComponent
const mainPlayer = await createAVPlayer(mainVideoUrl);
const pipPlayer = await createAVPlayer(pipVideoUrl);
const xComponent = this.$element('pip_xcomponent'); // 画中画容器

// 绑定Surface
const surfaceId = xComponent.getXComponentSurfaceId();
pipPlayer.setDisplaySurface(surfaceId);

// 添加手势
const panGesture = new PanGesture();
const pinchGesture = new PinchGesture();
xComponent.addGesture(panGesture.onActionUpdate((event) => {
  // 更新xComponent位置
}));
xComponent.addGesture(pinchGesture.onActionUpdate((event) => {
  // 计算缩放比例并调整大小
}));

注意事项：

  • 画中画视频层需确保置于主视频上层（通过Z序控制）。
  • 手势事件需合理冲突处理（如同时捏合和滑动）。
  • 释放资源：播放结束后及时调用AVPlayer的release()避免内存泄漏。
回到顶部