Fun with Multimedia!

Sight, Sound & Motion in Action

Overview

  1. Sight
  2. Sound
  3. Motion

SIGHT

This section demonstrates how to link to two different web pages that contain images and text. Students often struggle with resizing images—they tend to enlarge all images to match the largest one. Instead, all images should be resized to match the smallest one.

Use your favorite image editing program to resize the images properly within your web pages. There is a 1MB file size limit for photos residing on the web server.

1. Web Pages

  1. Dallas Cowboys
  2. Santorini Greece

SOUND

This section demonstrates the implementation of sound into a web page. The HTML5 audio tag will be explored. Please visit the Can I use website for information regarding HTML5 and browser support. There is a 1MB file size limit for audio files residing on the web server.

2. Audio Files

  1. wav (HTML5 audio tag)
  2. ogg (HTML5 audio tag)
  3. mp3 (HTML5 audio tag)

Horse (OGG):

Open horse.ogg directly

Applause (WAV):

Open applause.wav directly

Embedded audio example:

MOTION

This section demonstrates the use of commonly supported video formats available for use within a web page. The HTML5 video tag and the iframe tag that YouTube uses to embed a video within a web page will be used in this section. Please visit the Can I use website for information regarding HTML5 and browser support.

3. Video Files

  1. Video (HTML5 video tag)
  2. iframe (YouTube embedded player)

Video Example 1

Video Example 2

Embedded iFrame Example