New perspectives on html5 and css3 – 7th edition

/in /by

Tutorial 8 –  Case Problem 1

 Complete the following:

1. Using your editor, open the ws_jfk_txt.html, ws_media_txt.css, and ws_captions_txt.vtt files from the html08 c case1 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. 

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

3. 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.mp4 and ws_jfk_speech.webm, including the mime-type for each video source. 

4. 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 HTML5