Lab 9 - Audio & Video

Overview

This week's lab will cover the following:

• Creating a new page, called media.html
• Using HTML5 to embed audio and video natively.

Lecture Slides

Creating a new page

Create a new page called media.html, that meets the following criteria. Refer to your previous lab instructions to do each of the following if needed.

1. Use the HTML5 doctype declaration
2. Set the Title to "Media", without the quotes
3. Insert meta tags indicating the encoding (charset) of utf-8, viewport and the author to your name
4. Insert a comment indicating your name and student number
5. Link your style sheet to the page
6. Make use of the main tag, as you did in Lab 3
7. Copy your navigation bar from your index page and modify it to properly indicate your current page

Introducing audio and video

Prior to HTML5, plugins (like Flash) were required to play audio or video in the browser. With HTML5, audio and video playback are now natively available (without a plugin).

Insert the audio tag

Add the opening audio tag and it's corresponding closing tag (at the top of your main section) by adding the following tag.

<audio controls>
			</audio>
		

Notice the controls attribute. Without this, the element won't appear in the browser (as there's no way to interact with it).

Adding some content

Using this free resource (provided by videvo), select an audio file of your choice and add it using the w3schools example. For this to work you will have to first download the audio file. You can then upload the file to GitHub, just like you did the picture in Lab 8.

Insert the video tag

Add the opening video tag and it's corresponding closing tag (at the top of your main section) by adding the following tag.

			<video>
			</video>
		

Using this free resource (provided by the videvo), select a video of your choice and add it using the w3schools example. Be sure to select a video labelled free. Again, for this to work you will have to first download the file. You can then upload the file to your server (if you are able to access it). Note the optional autoplay attribute, which isn't ideal - omit this.

You may wish to resize your video, using the width and height parameters (included in the w3schools example). Experiment with these until you achieve a result you're happy with. You may also wish to add a few line breaks in, to assist in spacing the audio and video elements.

Adding a video from YouTube

Sometimes you may wish to embed a video from another platform (such as YouTube) instead of hosting your own. These take up less space, as they are being stored by YouTube, not you. You can do this using the iframe tag.

To add a video from YouTube, first browse to a video you want. Once you have found your video:

1. Click the share button.
2. Click Embed (the button labelled with < >).
3. Note the embed options you can select.
4. Copy the iframe code and paste it into your html document.

Completing the Lab

Using the steps outlined at the end of Lab 7, pull your changes into your AWS instance and take a screenshot. Your page should look similar to the following output. If it does not, go back and complete whatever you've missed.

Your page should validate using the w3schools html validator & css validator. To submit your lab you need to submit the code to your GitHub repo (which you did in already in the lab). Additionally, you need to submit a screenshot of it running your server to the assignment folder in eCentennial.

Exploration Questions

1. What tag did you use to insert an audio clip?
2. What tag did you use to insert an video clip?
3. What happens when you omit the controls attribute for video?
4. How do you make a video auto play?
5. What happens when you omit the controls attribute for audio?
6. Does video autoplay work on mobile devices?
7. What video formats are supported in HTML5?
8. What audio formats are supported in HTML5?