Radiant Media Player supports interactive transcripts in the following format:
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.
<!-- 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>
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 codename: String - the track nameuri: String - the transcript VTT file URIDefault: []. Example:
const transcripts = [
{
lng: 'en',
name: 'English',
uri: 'https://www.radiantmediaplayer.com/media/vtt/transcripts/transcript.vtt'
}
];
©2015-2025 Radiant Media Player. All Rights Reserved. ✝