Provides a simple transcript of a WebVTT file for displaying onscreen.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
js Added licence. Jan 27, 2013 Update Jan 28, 2013
sample.html Changed indentation to spaces. Dec 13, 2015
subtitles-de.vtt Initial upload. Jan 27, 2013
subtitles-en.vtt Initial upload. Jan 27, 2013

WebVTT Transcript


WebVTT Transcript will parse a WebVTT file allowing for its contents to be displayed on screen.


Most of the WebVTT file parsing code has been taken from Playr by delphiki.


To load a WebVTT file, all you need to do is call webvttTranscript(file, displayElement); where file is the path to the WebVTT file and displayElement is where the transcript contents are to be displayed. This is typically attached to a click event handler, for example, given the HTML:

<a id="en" href="#">English</a>
<div id="transcript"></div>

The following JavaScript might be used:

var display = document.getElementById('transcript');
document.getElementById("en").addEventListener("click", function(e) {
    webvttTranscript('subtitles-en.vtt', display);
}, false);


You can view an online example at WebVTT Transcript Example