CSCI E-3 Unit 4 Project
The Unit 4 Project 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 Project #3A, and will finish this with a fully-working
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 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 in the 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 Unit Project #3A.
The HTML source code looks something like this:
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"
<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
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
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 in Week 13 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].project4 zipped into a file called
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
from the soles of
the shoes to the freeze dried fruit in your cereal. These technologies, called
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
of these the spinoffs began as innovations for nasa missions like the space
shuttle, the Hubble Space Telescope, and the International Space
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