HarmonyOS鸿蒙Next中视频播放如何在跨页面时实现无缝转场的效果

HarmonyOS鸿蒙Next中视频播放如何在跨页面时实现无缝转场的效果 视频播放如何在跨页面时实现无缝转场的效果

3 回复

【背景知识】

AVPlayer集成了流媒体和本地资源解析，媒体资源解封装，视频解码和渲染功能，适用于对媒体资源进行端到端播放的场景，可直接播放mp4、mkv等格式的视频文件。

AVPlayer需要从XComponent组件获取并设置surfaceId属性，用于设置显示画面。surfaceId属性支持在initialized状态下设置，支持在prepared/playing/paused/completed/stopped状态下重新设置，重新设置时确保已经在initialized状态下进行设置，否则重新设置失败，重新设置后视频播放在新的窗口渲染。

【解决方案】

可以通过动态切换surface，实现跨页面视频播放无缝转场。具体操作步骤如下：

  1. 在page1页面，通过GlobalContext将AVPlayer当做全局单例变量放到Map<string, media.AVPlayer>里面。

  2. 通过router跳转到page2页面，通过Map<string, media.AVPlayer>获取单例AVPlayer，将page2页面的XComponent的SurfaceId设置给AVPlayer。

// pages/Page1
import { media } from '@kit.MediaKit';
export class GlobalContext {
    private constructor() {}
    private static instance: GlobalContext;
    private _objects = new Map<string, media.AVPlayer>();

    public static getInstance(): GlobalContext {
        if (!GlobalContext.instance) {
            GlobalContext.instance = new GlobalContext();
        }
        return GlobalContext.instance;
    }

    getObject(value: string): media.AVPlayer | undefined {
        return this._objects.get(value);
    }

    setObject(key: string, objectClass: media.AVPlayer): void {
        this._objects.set(key, objectClass);
    }
}

onJumpClick(): void {
    this.getUIContext().getRouter().pushUrl({
        url: 'pages/Page2'
    }, (err) => {
        if (err) {
        console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
        return;
        }
        console.info(`Invoke pushUrl succeeded`);
    });
}
  1. 将AVPlayer放进全局Map中，AVPlayer指定相应组件的surfaceId即可完成播放无缝切换。
// pages/Page1
// 将AVPlayer放进全局map
if (this.player) {
    GlobalContext.getInstance().setObject('value', this.player);
}
// pages/Page2
.onLoad(() => {
    this.mXComponentController.setXComponentSurfaceSize({ surfaceWidth: this.xComponentWidth, surfaceHeight: this.xComponentHeight });
    this.surfaceID = this.mXComponentController.getXComponentSurfaceId();

    // 取出全局map里面的AVPlayer
    this.avPlayer = GlobalContext.getInstance().getObject('value');
    if (this.avPlayer) {
        this.avPlayer.surfaceId = this.surfaceID;
    }
})

更多关于HarmonyOS鸿蒙Next中视频播放如何在跨页面时实现无缝转场的效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，通过AVPlayer和PageAbility组件实现跨页面视频无缝转场。使用AVPlayer的prepare()和play()方法预加载视频，结合PageAbility的迁移能力保持播放状态。通过Want对象传递播放进度和状态数据至目标页面，目标页面接收后立即恢复播放。利用Stage模型的任务管理确保播放器实例不中断，实现平滑过渡。

在HarmonyOS Next中实现视频播放跨页面无缝转场，可通过以下核心方案：

  1. 使用PageTransition组件
    在页面A和页面B中配置共享元素转场：

    // 页面A
[@Component](/user/Component)
struct PageA {
  build() {
    Navigator({ target: 'pages/PageB' }) {
      Video({
        src: $rawfile('video.mp4'),
        controller: this.videoController
      })
        .transition(SharedTransition.transition('videoTransition'))
    }
  }
}

// 页面B
[@Component](/user/Component)
struct PageB {
  build() {
    Video({
      src: $rawfile('video.mp4'),
      controller: this.videoController
    })
      .transition(SharedTransition.transition('videoTransition'))
  }
}

  2. 保持播放状态连续性

    • 使用全局VideoController实例
    • 通过AppStorage或全局状态管理共享播放进度
    const globalVideoController = new VideoController();

  3. 转场时机控制
    在aboutToAppear/aboutToDisappear生命周期中同步播放状态：

    aboutToDisappear() {
  // 保存播放进度到AppStorage
  AppStorage.setOrCreate<number>('videoProgress', this.videoController.currentTime);
}

  4. 转场动画优化

    • 设置matchedGeometrySource配置共享元素尺寸匹配
    • 使用animateTo添加自定义转场曲线

该方案可确保视频画面、播放进度、音频输出的完整连续性，实现真正的无缝体验。注意保持两个页面中视频组件的布局参数一致。

回到顶部