HTML5 Video Embed - with video.js

by jazahn

HTML

<link rel="stylesheet" href="http://vjs.zencdn.net/4.12/video-js.css">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<video 
 id="nasapromo"
 class="video-js vjs-default-skin"
 controls
 data-setup='{}'>
    <source src="http://www.people.fas.harvard.edu/~lbouthillier/nasa-spinoffs.mp4" type='video/mp4' />
    I can't play this!
</video>

<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...

CSS

#nasapromo {
   width: 50%; 
}

.hilite {
    background-color: yellow;
}

JavaScript

//var vid = document.getElementById("nasapromo");
//var vid = $("#nasapromo").find("video")[0];
var myvid = videojs("nasapromo");

myvid.currentTime(17);
myvid.play();

myvid.on("timeupdate", function(){
    var time = myvid.currentTime();
    
    $(".words").each(function(index, item){
        var start = parseFloat($(item).attr("data-start"));
        var dur = parseFloat($(item).attr("data-dur"));
        var end = start + dur;
        
        if(time >= start && time <= end){
            $(item).addClass("hilite");
        } else {
            $(item).removeClass("hilite");
        }
        
    });
    
});

$("#transcript").on("click", function(event){
    var start = $(event.target).attr("data-start");
    myvid.currentTime(start);
});