如何在dash-video组件初始化完成后立即获取Dash.js实例（基于media chrome）

嘿，我来帮你搞定这个问题！你现在靠setTimeout延迟1秒去拿Dash.js实例的做法确实不太稳妥——万一网络慢或者设备性能差，1秒不够的话代码就报错了，而且这种“猜时机”的写法也不优雅。其实dash-video组件本身就给咱们留了精准的信号，完全不用定时器！

dash-video组件在内部完成Dash.js实例的初始化，并把实例挂载到元素的api属性上之后，会自动派发一个名为api-ready的自定义事件。这就是咱们要等的“就绪通知”，用它来触发后续操作是最可靠的。

针对你的Angular代码修改方案 #

直接把定时器换成事件监听就行，代码更健壮：

@Component({
  selector: 'app-root',
  template: `
    <media-controller>
      <dash-video #video src="https://dash.akamaized.net/akamai/streamroot/050714/Spring_4Ktest.mpd" slot="media" crossorigin muted ></dash-video>
    </media-controller>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class App {
  protected video = viewChild.required<ElementRef<any>>('video');

  constructor() {
    effect(() => {
      const nativeVideoEl = this.video().nativeElement;
      // 监听api-ready事件，精准捕获实例就绪时机
      nativeVideoEl.addEventListener('api-ready', () => {
        nativeVideoEl.api.addRequestInterceptor(interceptor);
        console.log('Dash.js实例已完全就绪，可以正常操作啦！');
      });
    });
  }
}

通用原生JS写法（非Angular场景也适用） #

如果是在纯原生JS项目里，写法更直接：

const dashVideoEl = document.querySelector('dash-video');
dashVideoEl.addEventListener('api-ready', () => {
  dashVideoEl.api.addRequestInterceptor(interceptor);
  console.log('Dash.js实例初始化完成！');
});

额外小提示 #

• 除了api-ready，组件还提供了api-destroy事件，当Dash.js实例被销毁时会触发，你可以用它来做一些清理工作。
• 这种事件驱动的方式完全依赖组件内部的状态通知，比定时器靠谱多了，不管环境怎么变，都能在实例就绪的第一时间执行代码。

内容来源于stack exchange