Bootstrap模态框视频点击播放时自动下载无法流式播放问题

项目基于Bootstrap模态框实现视频弹窗播放功能：点击播放按钮后弹出模态框，加载对应流媒体地址自动播放；关闭模态框时清空视频源停止播放。现有逻辑运行整体正常，但切换视频源点击播放后，流式播放启动前会自动触发视频下载，需要阻止该自动下载行为，仅保留流式播放能力。

模态框结构 #

<div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="showModal" aria-hidden="true"
  data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content">
      <i data-bs-dismiss="modal" aria-label="Close" class="bi bi-x-lg btn-close" (click)="closeIframe()"></i>
      <div class="modal-body">
        <video class="show-video" controls crossorigin="" autoplay="" id="player" [src]="source" __idm_id__="3612673">
          <source [src]="source" type="video/mp4">
        </video>
      </div>
    </div>
  </div>
</div>

播放按钮 #

<button (click)="playIframe(show.stream)" class="btn btn-success play" type="submit" *ngIf="show.stream != ''"
          data-bs-toggle="modal" data-bs-target="#showModal"><i class="bi bi-play-fill"></i>
          Watch Now</button>

原有交互逻辑 #

playIframe(_source: string) {
  this.source = _source;
}

// 关闭模态框时调用
closeIframe() {
  this.source = '';
}

按优先级依次排查调整以下配置即可解决问题：

• 清理video标签冗余绑定：现有代码同时在<video>标签和内部<source>标签上绑定了同一个源地址，双重绑定会触发浏览器重复发起资源请求，易触发异常下载逻辑。保留任意一处源绑定即可，推荐删除video标签上的[src]="source"绑定，仅保留内部source标签的绑定。
• 新增预加载控制属性：给video标签添加preload="none"属性，告知浏览器不要在页面加载、元素渲染阶段提前请求视频资源，仅在明确触发播放动作后才开始加载流媒体，避免点击按钮后、模态框完全弹出前的提前资源拉取。
• 调整视频源赋值时机：不要在点击播放按钮的瞬间直接给绑定的source变量赋值，改为监听Bootstrap模态框的shown.bs.modal事件，等模态框动画结束、完全渲染展示后再赋值视频源，避免模态框加载阶段浏览器对资源的异常处理触发下载。对应调整后的逻辑代码参考：

// 组件内新增临时变量存储待播放地址
tempSource = '';
player: HTMLVideoElement;

ngAfterViewInit() {
  this.player = document.getElementById('player') as HTMLVideoElement;
  const modalEl = document.getElementById('showModal');
  // 模态框完全展示后再加载视频
  modalEl.addEventListener('shown.bs.modal', () => {
    this.source = this.tempSource;
    this.player.load();
    this.player.play().catch(() => {
      // 捕获浏览器自动播放限制异常，无需额外处理，用户手动点击播放即可
    });
  });
  // 模态框完全关闭后彻底清空资源
  modalEl.addEventListener('hidden.bs.modal', () => {
    this.source = '';
    this.tempSource = '';
    this.player.pause();
    this.player.removeAttribute('src');
    this.player.load();
  })
}

playIframe(_source: string) {
  // 点击按钮时仅缓存待播放地址，不直接触发资源请求
  this.tempSource = _source;
}

• 校验服务端响应头：确保流媒体接口返回正确的响应头，禁止返回Content-Disposition: attachment（该头会强制浏览器触发下载而非在线播放）；需添加Accept-Ranges: bytes头支持范围请求，这是视频流式播放的必要配置，同时确保Content-Type与实际视频格式匹配（如mp4格式对应video/mp4）。
• 排查本地插件影响：代码中video标签上的__idm_id__="3612673"是IDM等第三方下载器注入的属性，这类插件会自动嗅探页面中的视频资源触发下载提示，属于本地调试环境的特有问题，生产环境不会出现该注入，可在插件设置中关闭对应站点的视频嗅探功能消除影响。

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