HTML5 Video Embed - no JS required

by Angeli Schwartz

HTML

<video 
 id="nasapromo"  
 src="http://www.people.fas.harvard.edu/~lbouthillier/nasa-spinoffs.mp4" 
 controls="true">
    I can't play this!
</video>
<div id="output"></div>
<div id="transcript"> <span class="words" data-start="10.099" data-dur="7"></span>
        <span class="words" data-start="17.869" data-dur="3.82">Hey this is
          Dwayne Johnson. While playing astronaut Chuck Baker in the film Planet</span>
        <span class="words" data-start="21.689" data-dur="0.701">51</span> <span
          class="words" data-start="22.39" data-dur="3.56">I gained a lot of
          respect for our nation's space program. NASA makes new</span> <span class="words"
          data-start="25.95" data-dur="1.35">discoveries about our universe</span>
        <span class="words" data-start="27.3" data-dur="4.11">every day but one
          of the coolest things about nasa is the technologies that</span> <span
          class="words" data-start="31.41" data-dur="1.55">it creates for
          exploring space</span> <span class="words" data-start="32.96" data-dur="3.739">are
          also improving life here on earth. NASA technologies can be found</span>
        <span class="words" data-start="36.699" data-dur="0.621">everywhere</span>
        <span class="words" data-start="37.32" data-dur="3.71">from the soles of
          the shoes to the freeze dried fruit in your cereal. These</span> <span
          class="words" data-start="41.03" data-dur="1.58">technologies, called
          spinoffs,</span> <span class="words" data-start="42.61" data-dur="4.36">help
          doctors heal patients with heart problems, scientists track rare
          animals, and</span> <span class="words" data-start="46.97" data-dur="2.409">firefighters
          and police officers and soldiers</span> <span class="words" data-start="49.379"
          data-dur="4.45">stay safe on the job. Space technology has even helped
          Olympic swimmers win</span> <span class="words"...

CSS

#nasapromo {
   width: 45%;   
}
.hilite {
    background-color: yellow;
    
}

JavaScript

var vid = $('#nasapromo');
var output = $('#output');
var transcript = $('#transcript');
var spans = $('.words');

vid[0].currentTime = 20;
//vid[0].play();


vid.on('timeupdate', function(){
    var time = vid[0].currentTime;
    spans.each(function(index, item){
        item = $(item);
        var start_time = parseFloat(item.attr('data-start'));
        var duration = parseFloat(item.attr('data-dur'));
        var end_time = start_time + duration;
    
        if(time >= start_time && time <= end_time){
            item.addClass("hilite");   
        } else {
            item.removeClass("hilite");   
        }
    });
});

$(".words").on('click', function(evt){
    var word = $(evt.target);
    var start_time = parseFloat(word.attr('data-start'));
    
    vid[0].currentTime = start_time;
    vid[0].play();
});