Transcription Plugin

Adding transcription to a video can greatly enhance its accessibility and reach. It is especially important for people who may be deaf or hard of hearing, as well as those who prefer to read the content.The "Interactive Transcript" plugin synchronizes the transcription with the video playback, highlighting the current text being spoken. Additionally, the user may search for the transcription's specific phrase, click on the transcription section, and jump to a specific video time. Transcribed text is taken from text track(s) cues and can be in multiple languages. The transcription is independent of the displayed subtitles.

The transcription plugin does not work properly with HLS or DASH in-band VTT captions when captions come only from the current fragment and only one language is exposed to the player. For the same reason, the transcription plugin will not work for live streams.

The basic usage of a transcription plugin is quite simple.

Code snippet

<link href="/videojs/skins/nuevo/videojs.min.css" rel="stylesheet">
<script src="/videojs/video.js"></script>
<script src="/videojs/nuevo.min.js"></script>
const player = videojs("my_player", {license: "key"});
player.nuevo({contextMenu:false});
player.transcript()

There are a few plugins' options available to set.

linelength (default: 160))determines the maximum characters length for one transcription section.

timegap (default: 10)determines maximum time between following cues that can be merged in a single transcription section.

theme (default: "dark"}you can switch to theme "light"

containerID (undefined)Separate container ID to display transcriptions

If you set option timegap:0 - each transcription line will be equal to a single captions line.

It is possible to display transcription in a separate container, e.g. under the player. Just set empty <div> with some unique ID and assign it to the transript plugin's appropriate option option.

Code snippet

player.transcription({containerID: "transcript_div_id"})

When using a language other than English, you can translate texts used in the transcription plugin and add it to your language .js file as follows:

Code snippet

"Transcript": "Transcript",
"Close Transcript": "Close transcript",
"Search transcript": "Search transcript",
"Settings": "Settings",
"Close settings", "Close settings",
"Language": "Language",
"Timestamps: "Timestamps",
"Theme": "Theme",
"on": "on",
"off": "off",
"Dark": "Dark",