12: Multimedia Mayhem

Learning Target

• Use the <video>, <audio> and <iframe> tags to add content to a web page
• Create video and audio files

Resources

The earlier versions of HTML had limited abilities to include audio or video without the use of plugins.

Due to significant security concerns, most browsers have removed native support for plugins such as ActiveX, Java Applets or Flash.

HTML5 added tags to support multimedia content:

<video>, <audio>

HTML also has a tag to allow you to display content from other webpages within your own:

<iframe>

Many websites will not allow their content to be displayed in an IFrame for security reasons. But, you can always display your own pages in an IFrame.

Video Downloader:
Important Note: It would likely not be legal to use this tool for projects outside of an educational environment unless the video has been licensed for such use (e.g. CC0, prior permission).

https://www.slicetube.io/

Only audio and low resolution video can be downloaded for free.

Public Domain Media

If you use these sites, be sure to find videos that are short and/or small file sizes. Otherwise, you will wait a long time for a download.

• • Library of Congress
    • Video: www.loc.gov
    • Audio: www.loc.gov
  • NASA
    • Audio & Video: images.nasa.gov
  • National Archives:
    • Video: catalog.archives.gov
    • Audio: catalog.archives.gov
  • Congress:
    • www.congress.gov

Instructions

Step 1: 

1. 1. Create a new folder called Media_Mayhem in your H: drive.
   2. Inside this folder create a new webpage file called index.html.
   3. Create a subfolder inside of Media_Mayhem called videos.
   4. Create a subfolder inside of Media_Mayhem called audio.

Note: We avoid using spaces in file names and folder names on the web. Spaces are converted to %20 in a URL which looks messy. Use underscores or dashes instead.

Step 2:

Find or record a school appropriate 15-30 second video from any of these sources where you (or someone else) is introducing themselves or doing an interview:

• • your cell phone (not during class)
  • parent's cell phone (at home)
  • classroom camera
  • classroom laptop webcam
  • animation software (3D or cartoon)
  • online website

Be sure to save the video in one of the formats officially supported by the <video> tag.
For example:

• • MP4
  • WebM
  • OGG (doesn't work in Safari)

Save your video into your videos folder.

Step 3:

Find or record a 15-30 second audio clip where you (or a group of people) sing a line of your school appropriate favorite song. You can use any one of these as a source:

• • your cell phone (not during class)
  • parent's cell phone
  • classroom headset microphone
  • classroom laptop microphone
  • online text to speech

Be sure you can save the audio clip in one of the formats officially supported by the <audio> tag.
For example:

• • MP3
  • WAV (large file size)
  • OGG (doesn't work in Safari)

Save your clip into your audio folder.

Step 4:

This project will end up with 4 pages:

• • Home page - links to the 3 other pages
  • Video page - links back to home
  • Audio page - links back to home
  • Iframe page - links back to home

Each page should contain at least these items:

• • A title, heading and informative text
  • Navigation link(s) (see above)

Extensions:

• • Use thumbnails as your hyperlinks
  • Add styles to make your pages more attractive
  • Improve the usability of your main navigation

Grading