Creates interactive transcripts from text tracks.
Once you've added the plugin script to your page, you can use it with any video:
<head>
<script src="video.js"></script>
<script src="videojs-transcript.js"></script>
</head>
<body>
<video id="video">
<source src="whatever.webm" type="video/webm">
<track kind="captions" src="mycaptions.srt" srclang="en" label="English" default>
</video>
<div id="transcript"></div>
<script>
var video = videojs('video')
video.ready(function(){
// Set up any options.
var options = {
showTitle: false,
showTrackSelector: false,
};
// Initialize the plugin.
var transcript = this.transcript(options);
// Then attach the widget to the page.
var transcriptContainer = document.querySelector('#transcript');
transcriptContainer.appendChild(transcript.el());
});
</script>
</body>You'll also want to include one of the css files. You can style the plugin as you like but there are a few examples in the /css folder to get you started.
You can use jsDelivr CDN like so:
<link href="https://cdn.jsdelivr.net/gh/tombyrer/videojs-transcript-click@0.8/css/videojs-transcript.css" title="CDN" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/tombyrer/videojs-transcript-click@1.0/dist/videojs-transcript-click.min.js"></script>As you click on the transcrpt lines, the video will seek to the start time of said line. However, it will not play if the video is currently stopped.
You may pass in an options object to the plugin upon initialization. This object may contain any of the following properties:
Default: true
Set to false to disable autoscrolling.
Default: false
By default current row shows on the bottom on autoscrolling. Set to true to show it in the center
REMOVED for now; prevented it from working at all. Open to PRs to re-add.
Default: 'line'
Set which elements in the transcript are clickable. Options are 'timestamp', 'text', the whole 'line', or 'none'.
Default: true
Show a title with the transcript widget.
(Currently the title only says 'Transcript')
Default: true
Show a track selector with the transcript widget.
Default: true
When you change the caption track on the video, the transcript changes tracks as well.
Default: true
Don't autoscroll the transcript when the user is trying to scroll it.
(This probably still has a few glitches to work out on touch screens and stuff right now)
el()
Returns the DOM element containing the html transcript widget. You'll need to append this to your page.
- Forked from walsh9 / videojs-transcript
- Works on Video.js v7.8+
- Removed scrollToCenter; could not get it to work right away
- Removed build tools & source; tooling was 5+ years old
- Removed .min file; most build tools will minify for you
- Updated for video.js 5.x
- Updated for video.js 4.12
- First release