Lab $2$: Adding a Video to the Wild Rescues Website

Problem: You volunteer at a local wildlife rescue, a nonprofit organization called Wild Rescues. The organization rescues all kinds of wild animals, rehabilitates them, and then releases them back into the wild. Wild Rescues needs a website to help raise awareness about the organization. You have already created the website and now need to add a video with captions. The video, with captions, is shown in Figure $9-40.$

Figure $9-40$

Continued $>$

$$

HTML $502$ HTML Chapter $9$ Integrating Audio and Video

In the Lab continued

Instructions: Perform the following tasks:

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.

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.

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.

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

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

Open the medialcaptions.vtt file in your text editor. Add your name and date to the NOTE, Use Table $9-8$ to create a captions file.

Table $9-8$ Captions for the Wild Rescues Video

$\backslash$table$[[$Line Number,Code to Insert$],[9,1],[10,],[11,$These baby raccoons were found abanumiche$],[12,],[13,\backslash$table$[[2],[00$:$08\mathrm{.}900-00$:$11\mathrm{.}700$

$$

Integrating Audio and Video HTML Chapter $9$ HTML $503$

$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.

$13.$ Submit your assignment in the format specified by your instructor.

$14.$ In this assignment, you added a video element and made it accessible by including captions and descriptions files. Is it possible to style captions? Research to find your answer and include an example of your findings.

$$