HTML and CSS Reference
In-Depth Information
Apply your
knowledge of
embedded video
to create a travel
guide page with
a video tour.
Case Problem 2
data Files needed for this case Problem: modernizr-1.5.js, roadtxt.htm, rw.css, rwlogo.
jpg, trailridge.mp4, trailridge.swf, trailridge.webm
Roadways
Karen Upton loves to travel and spends more than half of the year behind
the wheel exploring byways and roadways for her online travel guide, Roadways. Karen's
Web site is a place where others who share her passion for travel can gather to share
stories, advice, and their love for travel. Karen would like to upgrade her site by adding
video tours of some of her favorite roadways. She's come to you for help in adding this
feature to her site. Karen presents you with a sample page; she already has created the
video and descriptive text for Trail Ridge Road, the highest paved continuous highway in
the United States. A preview of the page you'll create for Karen is shown in Figure 7-46.
Figure 7-46
roadways web page
Complete the following:
1. Use your text editor to open the
roadtxt.htm
file from the tutorial.07\case2 folder
included with your Data Files. Enter
your name
and
the date
in the comment section
of the file. Save the file as
roadways.htm
in the same folder.
2. Scroll down to the
figure
element and within the element insert a
video
element
for the two source files
trailridge.mp4
and
trailridge.webm
. Display the controls with
the video clip. Set the width and height of the video clip to 320 pixels by 260 pixels.
3. Nest within the
video
element an
object
element to display the Flash player file
trailridge.swf
. Set the dimensions of the Flash player to 320 pixels wide by
260 pixels high.
4. If the user's browser doesn't support HTML5 video or Shockwave Flash, display the
message,
To play this clip you need the Shockwave Player
. Include a link to the Web
site where users can download the player.
