Project 4

Last Project

by jhu26

HTML

<body>
    <div class="container">
      <h1>CSCI E-3 Unit 4 Project</h1>
      <p class="whatlearn">The Unit 4 Project will give you a chance to exercise
        your knowledge of extending jQuery and of multimedia players like the
        JWPlayer.&nbsp; We're building on the "divide-text-into-spans" example
        we started in Project #3A, and will finish this with a fully-working
        example. &nbsp; </p>
      <h4><br>
        <em>You will use jQuery and JWPlayer to add a video to this page, and
          make the transcript interactive with the video. The file at
          js/transcript.js has a framework "stubbed out" with a few key code
          segments&nbsp; for you to fill in.&nbsp; <br>
        </em></h4>
      At the bottom of this page is a block of text which is the transcript from
      a public-domain video produced by NASA. (Sorry for the hokey video&mdash;I
      needed something in the public domain, brief, and for which there was a timed
      transcript available).&nbsp; If you look at the source code, you'll see
      that this seemingly single block of text is actually broken up into many
      separate SPANs, similar to the ones you made in Unit Project #3A.&nbsp; <br>
      <br>
      The HTML source code looks something like this:<br>
      <blockquote><span style="font-family: monospace;">&lt;span class="words"
          data-start="17.869" data-dur="3.82"&gt;Hey this is Dwayne Johnson.
          While playing astronaut Chuck Baker in the film Planet&lt;/span&gt;<br>
          &lt;span class="words" data-start="21.689"
          data-dur="0.701"&gt;51&lt;/span&gt;<br>
          &lt;span class="words" data-start="22.39" data-dur="3.56"&gt;I gained
          a lot of respect for our nation's space program. NASA makes
          new&lt;/span&gt;</span></blockquote>
      The code in the js/transcript.js file provides the framework for the
      solution which is a jQuery plugin called 'playerConnect()'.&nbsp; In
      usage, it looks...

CSS

.hilite {
    background-color:yellow;
}

.words:hover {
    background-color:lightgray;
}

#transcript {
    width:610px;
    border: 1px solid gray;
    padding: 1em;
}

#starttime, #endtime{
    width:6em;
}


body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.428571429;
	color: #333;
}
.container {
	width: 80%;
	margin: auto;
}

h4 {
	border-top: 1px solid black;
	padding-top: 1em;
	width: 95%;
}

.hint {
	display:none;
	color:red;
}

.button {
    text-indent:0;
    border:1px solid #eda933;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:65px;
    line-height:65px;
    padding: .5 em;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #cd8a15;
    background-color:#f6b33d;
}

JavaScript

(function($){

   
    $.fn.playerConnect = function(player){ 
        var transcriptElements = this;
 
        player.onTime(function(evt){                 
                var time =  jwplayer().getPosition(); //YOUR CODE TO ADD #2 - replace the empty quotes with your code
                console.log(time);       // see if it's working
		for (var i = 0; i < transcriptElements.length; i ++) {
			var theSpan 	= transcriptElements[i];
			var startTime 	= parseInt(theSpan.getAttribute("data-start"));
			var duration 	= parseInt(theSpan.getAttribute("data-dur"));
			
			if (time >= startTime && time  <= StartTime + duration) {
				theSpan.style.display = "inline";
			} else {
				theSpan.style.display = "none";
		
			}
		}
		
	

                // YOUR for() loop or transcriptElements.each() goes here...
                // YOUR CODE TO ADD #3


        });

         
        return this.click(function(evt){

                // YOUR CODE TO ADD #4
                //   Get the value of the data-start attribute (the jQuery .attr() function could help here)
                //   and call player.seek([your value goes here])


       });
   };

})(jQuery);


// We always use $(document).ready() to be sure the DOM has loaded
//  before we execute any JS that references the DOM
$(document).ready(function(){

    

   //add the media player
   //  YOUR CODE TO ADD #1 (already done for you)
   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
        //...