无法为 mp4 视频呈现带有 Video.JS 的嵌入式字幕

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 已向我显示了上层信息，我认为也许我可以强制执行它。

我已经阅读了他们的文档，但他们没有提供太多关于他们认为 'native subtitles' 或 'emulated subtiles' 的信息，所以我尝试摆弄它，希望它能起作用。

对于这种情况，我唯一的 'fix' 是在后端级别使用 FFMpeg，提取 .srt 文件，将其发送到 frondend，然后以编程方式将 srt 文件附加到视频标签本身（轨道元素），但是必须是一个更人性化的选择

或者寻找更好的视频库。在线

Answer 1

嵌入式字幕轨道取决于浏览器的本机支持，这不是很普遍。 Safari 在 MP4 中支持 mov_text，仅此而已。

Safari 不会播放 ffmpeg 输出中的文件，因为它是一个 matroska (mkv) 容器。 Chrome 经常播放重命名为 mp4 的 mkv) 但不支持内嵌字幕。

无法为 mp4 视频呈现带有 Video.JS 的嵌入式字幕

Not able to render embedded subtitles with Video.JS for mp4 video

angular

ffmpeg

video.js

video-subtitles