Angular路由跳转时如何保留Vimeo播放器div避免视频重新缓冲

这个方案完全可落地，核心逻辑是让Vimeo播放器的DOM实例不跟随路由销毁，仅在需要的时候调整显示位置和状态，完全可以避免二次缓冲问题。实现步骤如下：

• 第一步：把原视频组件中的Vimeo容器代码移到app.component.html中，默认设置display: none隐藏

<div id="VimeoVideoDiv" class="message-fullarea vimeo-global-player" data-vimeo-controls="false" data-vimeo-autoplay="false" style="display: none;"></div>
<router-outlet></router-outlet>

• 第二步：创建一个全局单例服务VimeoPlayerService，用来存储Vimeo播放器实例、当前播放进度、显隐状态
• 第三步：在视频播放组件的对应展示位置添加占位节点<ng-template #vimeoContainer></ng-template>，组件初始化时，使用Renderer2将全局的Vimeo容器DOM移动到占位节点位置，取消隐藏，直接复用已经存在的播放器实例
• 第四步：路由离开视频组件前，把Vimeo容器DOM移回根组件的隐藏区域，同时记录当前暂停的进度即可，不需要销毁播放器实例

• 方案1：使用Angular路由复用策略
  自定义RouteReuseStrategy规则，指定视频播放组件的路由为可复用路由，路由跳转时不会销毁该组件实例，仅做隐藏处理。跳转回视频页时直接恢复组件显示，原有Vimeo播放器实例完全保留，不会触发二次缓冲，改造成本比手动移动DOM更低。
• 方案2：采集页改为模态框实现，取消路由跳转
  如果产品逻辑允许不用跳转路由，可以把数据采集页面改成全局浮层模态框。暂停视频后弹出模态框采集数据，提交后关闭模态框即可，原视频页面全程没有销毁，播放器实例一直存在，是改造成本最低的方案。

所有方案都建议同步在全局服务中实时存储播放器的播放状态、当前进度，避免页面刷新等异常场景下状态丢失。

内容的提问来源于stack exchange，提问作者Bonomi
</think_never_used_51bce0c785ca2f68081bfa7d91973934># 你提到的全局挂载方案可行性说明
这个方案完全可落地，核心逻辑是让Vimeo播放器的DOM实例不跟随路由销毁，仅在需要的时候调整显示位置和状态，完全可以避免二次缓冲问题。实现步骤如下：

• 第一步：把原视频组件中的Vimeo容器代码移到app.component.html中，默认设置display: none隐藏

<div id="VimeoVideoDiv" class="message-fullarea vimeo-global-player" data-vimeo-controls="false" data-vimeo-autoplay="false" style="display: none;"></div>
<router-outlet></router-outlet>

• 第二步：创建一个全局单例服务VimeoPlayerService，用来存储Vimeo播放器实例、当前播放进度、显隐状态
• 第三步：在视频播放组件的对应展示位置添加占位节点<ng-template #vimeoContainer></ng-template>，组件初始化时，使用Renderer2将全局的Vimeo容器DOM移动到占位节点位置，取消隐藏，直接复用已经存在的播放器实例
• 第四步：路由离开视频组件前，把Vimeo容器DOM移回根组件的隐藏区域，同时记录当前暂停的进度即可，不需要销毁播放器实例

• 方案1：使用Angular路由复用策略
  自定义RouteReuseStrategy规则，指定视频播放组件的路由为可复用路由，路由跳转时不会销毁该组件实例，仅做隐藏处理。跳转回视频页时直接恢复组件显示，原有Vimeo播放器实例完全保留，不会触发二次缓冲，改造成本比手动移动DOM更低。
• 方案2：采集页改为模态框实现，取消路由跳转
  如果产品逻辑允许不用跳转路由，可以把数据采集页面改成全局浮层模态框。暂停视频后弹出模态框采集数据，提交后关闭模态框即可，原视频页面全程没有销毁，播放器实例一直存在，是改造成本最低的方案。

所有方案都建议同步在全局服务中实时存储播放器的播放状态、当前进度，避免页面刷新等异常场景下状态丢失。

内容的提问来源于stack exchange，提问作者Bonomi