In the Lab Chapter $9,$ Pages $501-503$

You have already created the website and now need to add a video with captions. The video, with captions, is shown in Figure $940.$

$1.$ Open your rescue folder and create a new subfolder named media. Copy the Data Files from chapter$09/$lab$2$ to your rescue$/$media folder.

$2.$ Open the about.html file in your text editor. Replace the image element on Line $53$ with a paragraph element that includes the following text: Watch the video below to meet our new, rescued friends.

$3.$ Insert two new lines below the paragraph element you added in Step $2.$ Add a video element with the controls attribute and a poster attribute that uses the baby$-$hawk.jpg image file.

$4.$ Nest a source element within the video element that specifies wildrescues.mp$4$ as the source file and video$/$mp$4$ as the type.

$5.$ Nest another source element that specifies wildrescues.webm as the source file and video$/$webm as the type.

$6.$ Open the media$\backslash$captions$.$vtt file in your text editor. Add your name and date to the NOTE. Use Table $98$ to create a captions file. Table

Line Number Code to Insert $1$

$91$

$1000$:$03\mathrm{.}200-->00$:$07\mathrm{.}200$

$11$ These baby raccoons were found abandoned near a home.

$12$

$132$

$1400$:$08\mathrm{.}900-->00$:$11\mathrm{.}700$

$15$ Nugget is learning how to climb trees.

$16$

$173$

$800$:$13\mathrm{.}800-->00$:$16\mathrm{.}500$

$19$ Princess was neglected by her owner.

$20$

$214$

$2200$:$18\mathrm{.}900-->00$:$20\mathrm{.}500$

$23$ Sox is an orphan.

$24$

$255$

$2600$:$24\mathrm{.}000-->00$:$26\mathrm{.}000$

$27$ Frank was found abandoned.

$28$

$296$

$3000$:$29\mathrm{.}000-->00$:$31\mathrm{.}500$

$31$ Princes hooves are in bad shape.

$7.$ In about.html$,$ use the track element to add the captions file to the video element. Include the following attributes: src$,$ kind, srclang, and label.

$8.$ Use the track element to add the descriptions file to the video element. Include the following attributes: src$,$ kind, srclang, and label.

$9.$ Below the source element, provide fallback text for legacy browsers that do not support the video element.

$10.$ Open the styles.css file in your text editor. Add the video selector to the CSS Reset style rule. Add the video selector to the img style rule as well.

$11.$ Save your changes. Use Web Server for Chrome to launch the website and then navigate to the About Us page. Turn the captions on and view the video with captions.

$12.$ Check your spelling. Validate all HTML and CSS files and correct any errors. Save your changes.