Show subtitle in HTML5 video player using json
<p>We need to create a video player the same as the reference site below:</p>

<p><a href="http://www.vagalume.com.br/selena-gomez/love-you-like-a-love-song.html" rel="nofollow">http://www.vagalume.com.br/selena-gomez/love-you-like-a-love-song.html</a></p>

<p>What we need to achieve is to create a <code>HTML5</code> player which plays youtube video with subtitle dynamically.</p>

<p>I have added one link above which is our reference link and we need to make the same functionality given in reference site.</p>

<p>Here is our HTML page code:</p>

<pre><code>&lt;code&gt;
$(document).ready(function() {
    $('audio, video').mediaelementplayer({
        alwaysShowControls: true,
        videoVolume: 'horizontal',
        features: ['playpause','progress','volume','fullscreen'],
        startLanguage: 'en'
    });
});
&lt;/code&gt;
</code></pre>

<p>Our video player code:</p>

<pre><code>&lt;code&gt;
video id="video" preload="metadata" controls="controls"&gt;
            source type="video/youtube" src="https://www.youtube.com/watch?v=FV4cwmM79NY"&gt;
        /video&gt;
&lt;/code&gt;
</code></pre>

<p>Here is our JavaScript code for adding subtitles dynamically.</p>

<pre><code>&lt;code&gt;
(function() {
    var video = document.getElementById("video"), i, track,     loadcues = document.getElementById("loadcues"), hideTracks = function() {
            for (i = 0; i &lt; video.textTracks.length; i++) {
                video.textTracks[i].mode = "hidden";
            }
        };
    trackdisplay();
    function trackdisplay(){
    hideTracks();
        track = video.addTextTrack("captions", "English", "en");
        track.mode = "showing";
        track.addCue(new VTTCue(0, 12, "Loaded Cues"));
        track.addCue(new VTTCue(18.7, 21.5, "This blade has a dark past."));
        track.addCue(new VTTCue(22.8, 26.8, "It has shed much innocent blood."));
        track.addCue(new VTTCue(29, 32.45, "You're a fool for traveling alone, so completely unprepared."));
        track.addCue(new VTTCue(32.75, 35.8, "You're lucky your blood's still flowing."));
        track.addCue(new VTTCue(36.25, 37.3, "Thank you."));
        track.addCue(new VTTCue(38.5, 40, "So..."));
        track.addCue(new VTTCue(40.4, 44.8, "What brings you to the land of the gatekeepers?"));
        track.addCue(new VTTCue(46, 48.5, "I'm searching for someone."));
        track.addCue(new VTTCue(49, 53.2, "Someone very dear? A kindred spirit?"));
        track.addCue(new VTTCue(54.4, 56, "A dragon."));
        track.addCue(new VTTCue(58.85, 61.75, "A dangerous quest for a lone hunter."));
        track.addCue(new VTTCue(62.95, 65.87, "I've been alone for as long as I can remember."));
        track.addCue(new VTTCue(118.25, 119.5, "We're almost done. Shhh..."));
}
    //loadcues.addEventListener("click", function() {

    //});
}());
&lt;/code&gt;
</code></pre>

<p>Thanks in advance</p>