Videogular2异步加载视频失效：onPlayerReady提前调用问题求助

问题根源 #

你使用的loadedMetadata事件仅在视频元数据（如分辨率、时长）加载完成时触发，此时视频的实际内容并未加载完毕，因此isCompleted属性会处于false状态，导致onPlayerReady相关逻辑被提前执行。

解决方案 #

• 改用canplaythrough事件监听
  该事件会在浏览器判断视频已加载足够数据、可流畅播放至结束时触发，更适合作为视频加载完成的判断节点：

.getDefaultMedia()
  .subscriptions.canplaythrough.subscribe(this.initVdo.bind(this));

• 在initVdo中检查加载状态，延迟初始化
  若需兼容特定场景或保留原有事件逻辑，可在initVdo内判断当前加载状态，未完成则等待加载完成后再执行onPlayerReady：

initVdo() {
  const media = this.player.getDefaultMedia();
  if (media.isCompleted) {
    this.onPlayerReady();
  } else {
    // 订阅loaded事件，触发后取消订阅并执行初始化
    const loadedSubscription = media.subscriptions.loaded.subscribe(() => {
      loadedSubscription.unsubscribe();
      this.onPlayerReady();
    });
  }
}

• 手动调用onPlayerReady的可行性
  完全支持手动调用，但必须确保视频已真正加载完成。你可以在确认isCompleted为true后，直接执行this.onPlayerReady()，需注意：若视频未加载完成就调用，可能出现播放卡顿或无法播放的异常。

内容的提问来源于stack exchange，提问作者Jan Šrámek