Cloudinary Video Player

Force HLS Subtitles

Full documentation

Example Code:

To force subtitles in an HLS stream even if the manifest does not declare them, add the following to the player configuration and then add your text tracks in the source:

        
            html5: {
              vhs: {
                overrideNative: true,
                },
            }
        
        

Make sure to add the following to your video element as the subtitles are coming from a different origin:

      
        crossorigin="anonymous"
      
    

See full example:

      
        <video
          id="player"
          controls
          muted
          class="cld-video-player"
          crossorigin="anonymous"
          width="500"
        ></video>
      
      
        var player = cloudinary.videoPlayer('player', {
          cloud_name: 'demo'
          html5: {
            vhs: {
              overrideNative: true,
            },
          },
        });

        player.source(
            'sea_turtle',
            {
              sourceTypes: ['hls'],
              transformation: {streaming_profile: 'hd'},
              textTracks: {
                captions: {
                  label: "English(captions)",
                  language: "en",
                  default: true,
                  url: "https://res.cloudinary.com/demo/raw/upload/outdoors.vtt"
                },
                subtitles: [
                  {
                    label: "English",
                    language: "en",
                    url: "https://res.cloudinary.com/demo/raw/upload/outdoors.vtt"
                  }
               ]
              }
            }
      );