using TextTrack API to show some subtitles

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: 980px;
    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;
    background: none;
    position: absolute;
    top: -235px;
    left: 0;
    text-align: center;
    width: 100%;
    padding: 0;
    margin: 0;
}
::cue {
    color: yellow;
}
::cue(.small) {
    font-size: 80%;
}
.cue-display span.cue .small {
    font-size: 80%;
}
::cue(.customstyle) {
    color: red;
    font: bold;
}
.cue-display span.cue .customstyle {
    color: red;
    font: bold;
}



@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.cue-display span.cue .small {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

.cue-display span.cue .small {
-webkit-animation-delay: 0.2s;
-moz-animation-delay:0.2s;
animation-delay: 0.2s;
}

JavaScript

webshims.setOptions('mediaelement', {
    replaceUI: 'auto'
});
webshims.setOptions('track', {
    override: 'auto'
});
webshims.polyfill('mediaelement track');


//add some cues to the display
jQuery(function ($) {
    //add a subtitle track to a video
    var track = $('video').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, 5, "My first Cue"));
    track.addCue(new VTTCue(5.1, 9.5, "My <u>underlined</u> Cue"));
    track.addCue(new VTTCue(9.6, 14.8, "My <c.small>small classname</c> Cue"));
    track.addCue(new VTTCue(15, 36, "My <c.customstyle>custom classname</c> Cue"));

    //bind a cuechange-listener
    $(track).on('cuechange', function () {
        if (window.console) {
            var activeCues = $.prop(this, 'activeCues');
            console.log(activeCues && activeCues[0] || 'exit');
        }
    });
});