angularffmpegvideo.jsvideo-subtitles

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


I am not able to render subtitles in video.js for an mp4 file which has the subtitle stream embedded to it.

If I'm running FFProbe /filePath I can confirm that the mp4 video has subtitles.

FFProbe screenshot

I'm using Angular for front-end, and this is how I'm setting up my videoJs player

    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);

For the front-end side I'm just displaying this:

<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>

And for the loading part, something simple, grabbing the mp4 file blob from user's choice.

 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 },
    ]);

The track element is added for testing, since FFProbe has shown me the upper info I thought maybe I could force it.

I have read their documentation but they don't provide much information in regards to what they percieve as 'native subtitles' or 'emulated subtiles' so I have tried fiddling with that hoping it could work.

My only 'fix' for this situation is to use FFMpeg at backend level, extract the .srt file, send it to frondend then programatically attach the srt file to the video tag itself (track element) but there has to be a more humanly option

Or maybe just look for a better video lib. online


Solution

  • Embedded caption tracks depends on the browser's native support which is not very widespread. Safari supports mov_text in MP4, and that's about it.

    Safari wouldn't play the file in the ffmpeg output as it's a matroska (mkv) container. Chrome will often play an mkv renamed to mp4) but doens't support the embedded subtitles.