-1

我无法在 video.js 中为嵌入了字幕流的 mp4 文件渲染字幕。

如果我正在跑步，FFProbe /filePath我可以确认 mp4 视频有字幕。

FFProbe 截图

我在前端使用 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 文件附加到视频标签本身（轨道元素），但必须有一个更人性化的选项

或者也许只是寻找一个更好的视频库。在线的

4

1 回答 1

2

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

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

于 2021-11-03T10:42:15.890 回答