Module 7 Multimedia & Interactivity

Module 7: Multimedia and Interactivity

• Presentation contains hyperlinks accessible for JAWS users via INSERT+F7.

Helper Applications & Plug-Ins

Helper Applications

• Defined as programs designated for specific file types (e.g., .wav, .mpg).

• Operate in a separate window from the browser.

Plug-Ins

• A more modern approach compared to helper applications.

• Allow media objects to integrate directly within the browser window.

Commonly Used Plug-Ins

• Adobe Flash Player (now obsolete)

• Adobe Reader

• Java (Java Virtual Machine)

• Windows Media Player

• Apple Quicktime

Containers & Codecs

HTML5 Audio & Video

• Native to browsers; no plug-ins required.

• Compatibility issue: Different browsers support different codecs.

Container

• Identified by file extension, contains media and metadata (considered an envelope).

Codec

• Compression algorithm that reduces the size of media files.

Common Audio File Types

• .wav: Wave File (large size)

• .aiff: Audio Interchange File Format

• .mid: Musical Instrument Digital Interface (MIDI)

• .a1u: Sun UNIX sound file

• .mp3: MPEG-1 Audio Layer-3

• .ogg: Ogg Vorbis (open-source)

• .m4a: Audio-only MPEG-4, supported by QuickTime and iTunes.

Common Video File Types

• .mov: QuickTime

• .avi: Microsoft Audio Video Interleaved

• .wmv: Windows Media File

• .flv: Flash Video File

• .mpg: MPEG (Motion Picture Experts Group)

• .m4v/.mp4: MPEG-4 formats.

• .ogv: Ogg Theora (open-source)

• .webm: VP8 codec (open video format, free)

Free Online Media Converter

• Website: https://audio.online-convert.com

Copyright Issues

• Only publish original web content or media licensed for use.

• Permission required to use media created by others.

• All works automatically copyrighted even without a notice.

• Fair Use Clause of the Copyright Act (Page. 489).

• Creative Commons: New copyright approach allowing shared use.

Configure Audio & Video on Web

• Basic hyperlink method

• Use of the "embed" element for multimedia (decreasing in use)

• HTML5 audio and video elements are becoming the standard.

Configure Audio & Video (1) - Hyperlink

• Hyperlink is the basic method for linking audio/video files:

  • Example: <a href="wdfpodcast.mp3" title="Web Design Podcast">Web Design Podcast</a>

Configure Audio & Video (2) – Embed Flash

• Adobe Flash: Multimedia application adding interactivity.

• Flash movies saved as .swf files.

• Requires Flash Player plug-in, support declining after 2020.

The Embed Element Example

• <embed type="application/x-shockwave-flash" src="fall5.swf" width="640" height="100" quality="high">

Configure Audio & Video (3) – HTML5

• HTML5 allows native audio/video playback without plug-ins.

• Audio Element: Use source for multiple audio formats (e.g., .ogg and .mp3).

• Video Element: Utilize source for multiple video formats (e.g., .ogg/ogv and .mp4).

• Important to consider codec and container compatibility.

HTML5 Audio & Source Elements

• Example structure:

  • <audio controls="controls">

  • <source src="soundloop.mp3" type="audio/mpeg">

  • <source src="soundloop.ogg" type="audio/ogg">

  • <a href="soundloop.mp3">Download the Audio File</a>

HTML5 Video & Source Elements

• Example for a video setup:

  • <video controls="controls" poster="sparky.jpg" width="160" height="150">

  • <source src="sparky.m4v" type="video/mp4">

  • <source src="sparky.ogv" type="video/ogg">

  • <a href="sparky.mov">Sparky the Dog</a>

Multimedia & Accessibility

• Provide alternate content such as:

  • Transcripts for audio files

  • Captions for video files

  • Text format for accessibility.

Reminder

• Long download times are the leading cause of visitors leaving web pages.

• Use multimedia judiciously to avoid slow loading.

CSS Drop Down Menu

• Configure navigation container with relative positioning.

• Code submenu (drop down) using ul and li elements.

• Ensure submenu ul is initially hidden and employs absolute positioning.

CSS3 Transform Property

• Allows rotations, scaling, skewing, or moving of elements.

• Example: transform: rotate(3deg);

CSS3 Transition Property

• Changes in property values can transition smoothly over time.

HTML5 Details & Summary Elements

• Creates interactive widgets by combining details and summary elements.

Example Implementation

• Example structure:

  • <details>

    • <summary>List of students enrolled</summary>

    • <ul>

      • <li>John Smith</li>

      • <li>Jane Doe</li>

      • <li>Richard Roe</li>

      • <li>Amy Smith</li>

    • </ul>

  • </details>

CSS Image Gallery

• Configure thumbnail images with proper li and img tags and attributes.

• Critical CSS settings for the gallery:

  • #gallery span { position: absolute; opacity: 0; transition: opacity 3s ease-in-out; left: -1000px; }

  • #gallery a:hover span { position: absolute; top: 16px; left: 320px; text-align: center; }