angular - 无法使用 Video.JS 为 mp4 视频呈现嵌入式字幕

Question

我无法在 video.js 中为嵌入了字幕流的 mp4 文件渲染字幕。
如果我正在运行 FFProbe /filePath我可以确认 mp4 视频有字幕。

我在前端使用 Angular，这就是我设置 videoJs 播放器的方式

    const videoJsConfig = {
          controls: true,
          autoplay: false,
          preload: 'auto',
          fluid: true,
          height: 600,
          width: 800,
    
          textTrackSettings: true
    
          // html5: {
          //   nativeTextTracks: false
          // }
        };
    
        this.player = videojs('preview-player', videoJsConfig);

对于前端，我只是显示这个:

<section class="main-preview-player">
  <video id="preview-player" class="video-js" crossorigin="anonymous">
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
    <track kind="subtitles" src="//subrip" srclang="en" label="English" default>
  </video>
  <div class="lds-ring" *ngIf="isVideoLoading"><div></div><div></div><div></div><div></div></div>
  <div class="watermark" *ngIf="auditId"></div>
</section>

而对于加载部分，一些简单的事情，从用户的选择中获取 mp4 文件 blob。

 const objectURL = URL.createObjectURL(file as Blob);
    const mediaSrc = this.domSanitizer.bypassSecurityTrustUrl(objectURL);

    console.log('mediaSrc', mediaSrc);

    this.player.src([
      { type: 'video/mp4', src: objectURL },
    ]);

添加 track 元素用于测试，因为 FFProbe 向我显示了我认为也许我可以强制它的上层信息。
我已经阅读了他们的文档，但他们没有提供太多关于他们认为是“原生字幕”或“模拟字幕”的信息，所以我试着摆弄它，希望它能起作用。
对于这种情况，我唯一的“修复”是在后端级别使用 FFMpeg，提取 .srt 文件，将其发送到 frondend，然后以编程方式将 srt 文件附加到视频标签本身(轨道元素)，但必须有一个更人性化的选项
或者也许只是寻找一个更好的视频库。在线的

Answer 1

嵌入式字幕轨道取决于浏览器的 native 支持，这不是很普遍。 Safari 支持 MP4 中的 mov_text，仅此而已。
Safari 不会播放 ffmpeg 输出中的文件，因为它是 matroska (mkv) 容器。 Chrome 经常会播放重命名为 mp4 的 mkv)但不支持嵌入的字幕。