Assignment
This assignment will give you a chance to exercise your knowledge of extending jQuery and of multimedia players like the JWPlayer. We're building on the "divide-text-into-spans" example we started in Homework #3a, and will finish this with a fully-working example.
You will use jQuery and JWPlayer to 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 for you to fill in.
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 - I needed something public domain, brief, and for which there was a timed transcript available). 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 Homework #3a.
The HTML source code looks something like this:
Hey this is Dwayne Johnson. While playing astronaut Chuck Baker in the film Planet
51
I gained a lot of respect for our nation's space program. NASA makes new
The code in the js/transcript.js file provides the framework for the solution which is a jQuery plugin called 'playerConnect()'. In usage, it looks like this: $('.words').playerConnect(player);, where the jQuery selector is returning the collection of SPAN elements, and player is the jwplayer instance we've added to the page.
The resulting behavior is twofold:
As the video plays, the relevant part of the transcript highlights.
If the user clicks on the transcript, the video seeks to the relevant segment.
A video showing the desired behavior is on the assignment page in Canvas.
Much of the code is provided for you in a well-commented framework, but the solution will require you to add code in four three places, each marked by a comment line like this: "YOUR CODE TO ADD #n":
YOUR CODE TO ADD #1: The first one is near the end of the JS file, where you'll create the jwplayer and load it into the page (this one is already done for you ... you're welcome!)
YOUR CODE TO ADD #2: Next you'll move into the jQuery plugin itself, where you'll get the current position of the video playback from the jwplayer's event object
YOUR CODE TO ADD #3: Third, you'll write the loop that compares the current player time with the time described in each element, and apply a style if the times match up.
YOUR CODE TO ADD #4: Finally, the click handler for each element is created, but the logic inside is missing. You'll add the code that causes a click to make the player seek to the right moment.
If this sounds scary, don't despair! The code already includes most of the heavy lifting, detailed instructions, and pseudo-code is provided in several places.
We will cover JWPlayer next week (4/29) in great detail and walk through some examples very similar to this one.
As usual, submit your project as a zip file, with a folder named like [lastname_firstname].hw4 zipped into a file called [lastname_firstname].hw4.zip.
Video Will Appear Here
Hey this is Dwayne Johnson. While playing astronaut Chuck Baker in the film Planet 51 I gained a lot of respect for our nation's space program. NASA makes new discoveries about our universe every day but one of the coolest things about nasa is the technologies that it creates for exploring space are also improving life here on earth. NASA technologies can be found everywherefrom the soles of the shoes to the freeze dried fruit in your cereal. These technologies, called spinoffs, help doctors heal patients with heart problems, scientists track rare animals, and firefighters and police officers and soldiers stay safe on the job. Space technology has even helped Olympic swimmers win gold medals. All of these the spinoffs began as innovations for nasa missions like the space shuttle, the Hubble Space Telescope, and the International Space Station. You don't have to be an astronaut to trace space back to where you live. Visit nasa.gov to learn more about how nasa technologies play a role in your life. After all, there's no space like home.