Practice Set, Week 4, Drawing Lines on the Canvas

by Ken Sprague

HTML

<head>
    <link rel="stylesheet" href="css/transcript.css">
    <script type="text/javascript" src="jwplayer/jwplayer.js"></script>
    <script type="text/javascript">jwplayer.key="kCqE9K8EVVjA+o40SKCMr1/JXOrlDpbOhctE8g==";</script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/transcript.js"></script>
  </head>

<div id="playerDiv">Video Will Appear Here</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"...

JavaScript

(function($){

    $.fn.playerConnect = function(player){
        console.log(this);
        var transcriptElements = this;

        player.onTime(function(evt){


                var time = ('data-start'); //YOUR CODE TO ADD #2 - replace the empty quotes with your code
                console.log(time);       // see if it's working


        transcriptElements.each(function() {
            var theStart = parseFloat($(this).attr('data-start')) + parseFloat($(this).attr('data-dur'));
            var theEnd   = parseFloat($(this).attr('data-dur'));
            console.log(theStart);
            if(time >= theStart && time <= theEnd){
            this.addClass('hilight');
            }else{
            this.removeClass('hilite');  
        });
        });

      
        return this.click(function(evt){
        player.seek($(this).attr('data-start'));
            
       });
   };

})(jQuery);



$(document).ready(function(){



   var player = jwplayer("playerDiv").setup({
                    file: "http://www.people.fas.harvard.edu/~lbouthillier/nasa-spinoffs.mp4",
                    height: 360,
                    width: 640,
                    controls:true,
                });

    // Like with $(document).ready(), we use player.onReady to be sure the
    //   player is loaded before we try to do anything with it
   player.onReady(function(){

        //  Here we call our jQuery plugin, playerConnect, which expects the
        //   collection of HTML elements that contains the transcript. In this
        //   case it's all the SPANs with class="words"
        $('.words').playerConnect(player);

    });

});