Figure $8-64$ HTML $678$ HTML $5$ and CSS $|$ Tutorial $8$ Enhancing a Website with Multimedia

Add the following track cues to the ws$\_$captions.vtt file, labeling the captions $1$ through $12$

$($times are in parenthesis$)$:

$(00$:$01\mathrm{.}00-00$:$004\mathrm{.}000)$ We observe today

$(00$:$04\mathrm{.}000-00$:$06\mathrm{.}000)$ not a victory of party,

$(00$:$06\mathrm{.}000-00$:$10\mathrm{.}000)$ but a celebration of freedom $-$

$(00$:$10\mathrm{.}000-00$:$12\mathrm{.}000)$ symbolizing an end,

$(00$:$12\mathrm{.}000-00$:$15\mathrm{.}000)$ as well as a beginning $-$

$(00$:$15\mathrm{.}000-00$:$17\mathrm{.}000)$ signifying renewal,

$(00$:$17\mathrm{.}000-00$:$19\mathrm{.}000)$ as well as change.

$(00$:$19\mathrm{.}000-00$:$22\mathrm{.}000)$ For I have sworn before you

$(00$:$22\mathrm{.}000-00$:$24\mathrm{.}000)$ and Almighty God

$(00$:$24\mathrm{.}000-00$:$27\mathrm{.}000)$ the same solemn oath

$(00$:$27\mathrm{.}000-00$:$30\mathrm{.}000)$ our forebears prescribed

$(00$:$30\mathrm{.}000-00$:$33\mathrm{.}000)$ nearly a century and three$-$quarters ago.

Save your changes to the file and then go to the ws$\_$media.css file in your editor. Within the

Video Player Styles section, insert a style rule that displays video elements as blocks with a

width of $90\%$ and horizontally centered by setting the top$/$bottom margins to $5$ pixels and the

left$/$right margins to auto.

Create a media query for screen devices with a minimum width of $521$ pixels. Within the media

query, create a style for video elements that sets the width of the player to $360$ pixels, floated on

the right margin with a margin width of $10$ pixels.

Within the Track Styles section, create a style rule for caption cues that displays the text in

a $1\mathrm{.}3$ em sans$-$serif font with a text color of $rgb(221,128,160),$ and a background color of

rgba$(255,255,255,0\mathrm{.}8).$

Save your changes to the file and then load the ws$\_$jfk$.$html file in your browser.

Test the page by playing the video clip of Kennedy's speech. Verify that captions are added to the

speech, matching the words uttered by the president. $($Notes: If you are using Google Chrome

or Opera, you will have to upload your files to a server if you wish to see the caption styles you

created for the video clip. If your captions appear white on a gray background, move the mouse

pointer away from the video player so that the video slider is not showing.$)$

Rhetoric in the United States page

Source: Wikimedia Commons

Complete the following:

Using your editor, open the ws$\_$jfk$\_$txt$.$html$,$ ws$\_$media$\_$txt$.$css$,$ and ws$\_$captions$\_$txt$.$vtt files from the html $08-$ case $1$ folder. Enter your name and the date in the comment section of each file, and save them as ws$\_$jfk$.$html$,$ ws$\_$media.css$,$ and ws$\_$captions.vtt files respectively.

Go to the ws$\_$jfk$.$html file in your editor. Insert a link to the ws$\_$media.css style sheet file. Take some time to study the content and structure of the document.

Scroll down to the article element and directly below the $h1$ heading, insert a video clip with the controls enabled, displaying the poster image ws$\_$jfk$\_$poster.png file. Add two possible sources to the video clip: ws$\_$jfk$\_$speech.mp$4$ and ws$\_$jkk$\_$speech.webm, including the mime$-$type for each video source.

After the two video sources, add a captions track with the label Speech Captions using the source file ws$\_$captions.vtt$.$ If the browser does not support embedded video, display the paragraph: To play this video clip, your browser needs to support HTML $5.$

Save your changes to the file and then open the ws$\_$captions.vtt file in your text editor. Add an initial line to the text file indicating that this file is in WEBVTT format.