Angular11中关闭Bootstrap4模态框时如何停止iframe内正在播放的视频

前置修改：开启iframe的JS控制权限 #

首先修改你HTML中iframe的src属性，在原有YouTube视频地址末尾追加参数?enablejsapi=1，如果原地址已经存在其他查询参数，就改为追加&enablejsapi=1，示例如下：

<!-- 修改前 -->
<iframe #player frameborder="0" allowfullscreen="1"
  title="YouTube video player" width="1000" height="360"
  src="https://www.youtube.com/embed/你的视频ID">
</iframe>

<!-- 修改后 -->
<iframe #player frameborder="0" allowfullscreen="1"
  title="YouTube video player" width="1000" height="360"
  src="https://www.youtube.com/embed/你的视频ID?enablejsapi=1">
</iframe>

这一步是必要前提，否则无法通过JS操作iframe内的YouTube播放器。

修正类型声明 #

你原有代码中@ViewChild的类型声明错误，iframe对应的DOM类型是HTMLIFrameElement而非HTMLInputElement，修改后：

@ViewChild('player') player: ElementRef<HTMLIFrameElement>

编写closeYt方法逻辑 #

提供两种常用实现，你可以根据需求选择：

方案1：发送暂停指令（推荐，保留播放进度） #

无需引入额外SDK，通过iframe跨域通信直接发送暂停/停止命令即可，适合需要保留当前播放进度的场景：

closeYt() {
  // 校验iframe实例存在
  if (this.player?.nativeElement?.contentWindow) {
    // 发送暂停命令，需要停止就把pauseVideo改为stopVideo
    this.player.nativeElement.contentWindow.postMessage(
      '{"event":"command","func":"pauseVideo","args":""}',
      'https://www.youtube.com' // 也可写*，限制域名更安全
    );
  }
  // 此处保留你原有关闭模态框的逻辑即可
}

方案2：重置iframe地址（简单粗暴，无需保留进度） #

如果不需要保留播放进度，直接重置iframe的src即可立刻停止视频播放：

closeYt() {
  if (this.player?.nativeElement) {
    const videoSrc = this.player.nativeElement.src;
    // 先清空地址再恢复，触发iframe重载停止播放
    this.player.nativeElement.src = '';
    this.player.nativeElement.src = videoSrc;
  }
  // 此处保留你原有关闭模态框的逻辑即可
}

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