using TextTrack API to show some subtitles

by trixta

HTML

<script src="http://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<div class="player">
    <div class="mediaplayer">
        <video poster="http://corrupt-system.de/assets/media/sintel/sintel-trailer.jpg" controls preload="none">
            <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4" />
            <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm" type="video/webm" />
        </video>
    </div>
    <p><a href="http://afarkas.github.io/webshim/demos/#Media">mediaelement and track polyfill</a>

    </p>
    <p><a href="http://afarkas.github.io/webshim/demos/demos/mediaelement/track-demo.html">see also life of tree demo</a>

    </p>
</div>

CSS

.mediaplayer {
    position: relative;
    height: 0;
    width: 90%;
    max-width: 980px;
    min-width: 310px;
    padding-bottom: 50.625%;
    /* 16/9 : 56.25% * 90% */
    margin: auto;
}
.mediaplayer video, .mediaplayer .polyfill-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.cue-display span.cue {
    color: yellow;
}
::cue {
    color: yellow;
}
::cue(.customstyle) {
    color: red;
    font: bold;
}
.cue-display span.cue .customstyle {
    color: red;
    font: bold;
}

JavaScript

webshims.setOptions('mediaelement', {
    //set to true to create player UI
    //replaceUI: true
});
webshims.setOptions('track', {
    //set to true to test webshim
    //override: true
});
webshims.polyfill('mediaelement track');


//add some cues to the display
jQuery(function ($) {
    //add a subtitle track to a video
    var $media = $('video');
    var track = $media.addTextTrack('subtitles', 'just a test', 'en');
    //make it visible
    track.mode = 'showing';

    // add some cues to show the text
    track.addCue(new VTTCue(0.5, 3.2, "My first Cue1"));
    track.addCue(new VTTCue(2.5, 3.5, "My <u>underlined</u> Cue1"));
    track.addCue(new VTTCue(3.1, 5, "My <c.customstyle>custom classname</c> Cue1"));
    track.addCue(new VTTCue(4.5, 6.2, "My first Cue2"));
    track.addCue(new VTTCue(6.1, 7, "My <c.customstyle>custom classname</c> Cue2"));

    track.addCue(new VTTCue(6.5, 9.2, "My first Cue3"));
    track.addCue(new VTTCue(7.5, 9.5, "My <u>underlined</u> Cue3"));
    track.addCue(new VTTCue(8.1, 10, "My <c.customstyle>custom classname</c> Cue3"));

    track.addCue(new VTTCue(10.5, 12.2, "My first Cue4"));
    track.addCue(new VTTCue(11.5, 14.5, "My <u>underlined</u> Cue4"));
    track.addCue(new VTTCue(12.1, 15, "My <c.customstyle>custom classname</c> Cue4"));

    track.addCue(new VTTCue(12.5, 16.2, "My first Cue5"));
    track.addCue(new VTTCue(13.3, 18.5, "My <u>underlined</u> Cue5"));
    track.addCue(new VTTCue(14.1, 19, "My <c.customstyle>custom classname</c> Cue5"));

    track.addCue(new VTTCue(14.555, 16.2, "My first Cue"));
    track.addCue(new VTTCue(15.3, 18.5, "My <u>underlined</u> Cue"));
    track.addCue(new VTTCue(16.1, 19.441, "My <c.customstyle>custom classname</c> Cue"));

    track.addCue(new VTTCue(17.1, 19.541, "Last cue you know"));


    //do the cuechange/cueexit/cueenter precision test:
    if (!window.console) {
        return;
    }
    var lastTime = -1;
    var timings = {tooHigh: 0, max: 0, min: Number.MAX_VALUE,...