Documentation

Interactive Transcripts

Scope of support

Radiant Media Player supports interactive transcripts in the following format:

  • Side-loaded WebVTT transcript file for on-demand video. WebVTT file is passed to the player through the transcripts player setting.

The interactive transcripts will be displayed in a side menu at the right of the player.

Note that the transcripts UI container (element with CSS class .rmp-transcripts-container) will take the full width of the parent container and will rescale based on parent current size.

Player layout

Player code example - see this example here

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/10.2.0/js/rmp-hlsjs.min.js"></script>
<!-- Transcripts and player container element -->
<div class="rmp-transcripts-container">
  <div class="rmp-transcripts-player-wrapper">
    <div id="rmp"></div>
  </div>
</div>
<script>
  const src = {
    hls: 'https://your-hls-url.m3u8'
  };
  // Your player settings
  const settings = {
    licenseKey: 'your-license-key',
    src,
    autoHeightMode: true,
    // Passing transcripts file to the player
    transcripts: [
      {
        lng: 'en',
        name: 'English',
        uri: 'https://www.radiantmediaplayer.com/media/vtt/transcripts/transcript.vtt'
      }
    ],
    contentMetadata: {
      poster: [
        'https://your-poster-url.jpg'
      ]
    }
  };
  const rmp = new RadiantMP('rmp');

  // Player initialisation
  async function initRmpPlayer() {
    try {
      await rmp.init(settings);  
      console.log('player ready');
    } catch (error) {
      console.error('Radiant Media Player failed to initialize', error);
    }
  }
  initRmpPlayer();

</script>

Player settings

transcripts: Array.<TranscriptTrack>

This setting holds the WebVTT transcript data to be displayed along the video. Each TranscriptTrack Object is having the following properties:

  • lng: String - the 2 digit ISO 639-1 (two-letter) language code
  • name: String - the track name
  • uri: String - the transcript VTT file URI

Default: []. Example:

const transcripts = [
  {
    lng: 'en',
    name: 'English',
    uri: 'https://www.radiantmediaplayer.com/media/vtt/transcripts/transcript.vtt'
  }
];
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.

©2015-2025 Radiant Media Player. All Rights Reserved.