This lab will allow you to demonstrate your understanding of how to incorporate video or audio into your pages. We'll create a basic HTML page that uses the audio and video elements from HTML5. As HTML5 is an emerging standard, we'll check how our work behaves in a number of browsers.

Lab 04 - Audiovisual Content

Video example for HTML 5

Audio example for HTML 5


Browser Screenshots

The HTML looked like this in Safari 5.1.2:
This is what the image looked like in Safari 5.1.2

The HTML looked like this in Chrome 16.0.912.63:
This is what the image looked like in Chrome 16.0.912.63

Standard Lab

Checklist
  • HTML valid
  • Audio and Video elements (2 marks)
  • Media included (2 marks)
  • Two browser examples
  • Extra Polish
  • ADV embedded media (3 marks)

Instructions

  1. First, read the w3schools documents on the audio and video elements
  2. Before starting with markup, find short pieces of audio and video you've created yourself. The video will need to be in mp4 format, and the audio will need to be in mp3 format. Place these files in a new folder called lab04 within your labs folder.
  3. Use a template, and save a new doc titled index.html in the lab04 folder. Open your newly created page, and put in a heading that identifies it as Lab 04
  4. Also in the html doc, create your audio and video elements. Use what you need of the code from the class notes, or what you can find at w3schools.
  5. Test your html doc in the latest version of:
    • either Firefox or Chrome
    And...
    • either Safari or Internet Explorer
    While in each of your chosen browsers, take a screenshot of how the browser renders the HTML5 content. Include the screenshots in your lab, and note the browser and version for each.
  6. Upload your lab04 folder to the labs folder in your site. Create a link on the index.html page to your lab04 folder. Test the link!
  7. Your finished webpage must be fully valid (use the W3C validator). Remember, it is easier to work incrementally and validate as you go - don't leave it until the end! Make sure that I can view your lab04 by following the link from your index.html page!

Advanced Lab

Upload either your audio or video to YouTube, SoundCloud, or another appropriate streaming site. You could use VIUTube. Embed that content at the end of your lab using the code from the site you've chosen.

Notes

  • For those looking for an encoder for OGG video files, the one discussed here seems to do the trick, or you could try using this one, or easyhtml5video.
  • Handbrake is another favourite for video conversion.
  • A good tool for simulating various versions of IE is here