Enhancing a Website with Multimedia

Introducing Multimedia on the Web

• HTML was initially designed for sharing text and data.
• The introduction of multimedia support marked a significant advancement in HTML, enabling streaming of audio, video, and interactive games.
• This transformation established the web as a major entertainment platform.
• A key challenge was delivering multimedia content quickly and easily without compromising quality.

Understanding Codecs and Containers

• Codec: A computer program that encodes and decodes data streams.
  • Codecs compress data for fast and efficient transmission.
  • They also decompress data for playback.
  • Compression can be lossy or lossless.

Lossy Compression

• Removes nonessential data to reduce file size.
• Example: Compressing an audio file by removing sounds barely audible to the human ear.
• Greater compression leads to more content loss.
• Data lost during compression cannot be recovered.

Lossless Compression

• Compresses data by removing redundant information.
• Example: Reducing "AAAABBBBBCCCCCC" (15 characters) to "4A5B6C" (6 characters).
• Cannot achieve the same level of compression as lossy compression.

Codecs and Containers

• Most codecs use a combination of lossy and lossless techniques.
• Container: Packages, transports, and presents the data; identified by a file extension.
• The web supports various container and codec combinations, but not all are equally supported.
• Example: Google Chrome uses the WebM container with the VP8 codec for video, but Apple devices do not support this combination.

Understanding Plug-Ins

• Media Player: Decodes and plays multimedia content.
• Plug-in: A software program accessed by a browser to provide features not native to the browser.
  • Plug-ins can open in an external window or run within the webpage as an embedded object.

Problems with the Plug-In Approach

• Requires users to install separate applications in addition to their web browsers.
• Availability varies across browsers, operating systems, and devices.
• Difficult to create and maintain HTML documents supporting multiple plug-ins.
• Consume significant system resources, leading to slow and unreliable performance.
• Pose a security risk, as many Internet attacks exploit vulnerabilities in plug-ins.

Working with the audio Element

• Audio clips are embedded using the <audio> element:
  • $<audio src=“url” attributes />$
  • url specifies the audio file source.
  • attributes define how the browser handles the audio clip.

audio Element Attributes

• autoplay: Starts playing the media clip as soon as it is loaded.
• controls: Displays the player controls.
• loop: Automatically restarts the media clip when finished.
• muted: Mutes the audio output.
• preload: Specifies if the media clip should be preloaded:
  • auto: Preloads the entire clip.
  • metadata: Preloads descriptive data.
  • none: Does not preload the clip.
• src: Specifies the source URL of the media clip.

Browsers and Audio Formats

• HTML does not specify a particular audio format.
• Developers can choose a format based on client needs.
• Browser support varies for different audio formats.
• It's important to determine if the intended browser supports the chosen format.

Audio Formats

• MP3
  • Description: MPEG-1 Audio Layer 3; widely used, standard for digital audio players.
  • Codec: MP3
  • File Extension: .mp3
  • MIME Type: audio/mpeg
• AAC
  • Description: Advanced Audio Coding; standard for Apple products, YouTube, and gaming systems.
  • Codec: AAC
  • File Extensions: .aac, .mp4, .m4a
  • MIME Type: audio/mp4
• OGG
  • Description: Open-source, royalty-free format designed for web audio with better quality than MP3.
  • Codec: Vorbis
  • File Extension: .ogg
  • MIME Type: audio/ogg
• WAV
  • Description: Original audio format for Windows PCs; used for storing uncompressed audio.
  • Codec: PCM
  • File Extension: .wav
  • MIME Type: audio/wav
• FLAC
  • Description: Free Lossless Audio Codec; offers bit-perfect copies of CD-quality music at half the size
  • Codec: FLAC
  • File Extension: .flac
  • MIME Type: audio/flac
• WebM
  • Description: Open-source format by Google for royalty-free audio and video with HTML elements
  • Codec: VP8, VP9
  • File Extension: .webm
  • MIME Type: audio/webm

Browser Support for Audio Formats

• Chrome: MP3, AAC, Ogg, WAV, FLAC, WebM
• Firefox: MP3, AAC, Ogg, WAV, FLAC, WebM
• Microsoft Edge: MP3, AAC, Ogg, WAV, FLAC, WebM
• Opera: MP3, AAC, Ogg, WAV, FLAC, WebM
• Safari: MP3, AAC, WAV, FLAC

Providing Multiple Audio Formats

• Use multiple <source> elements within a single <audio> element to provide various versions of the same media file.
  • $<audio>$
  • $<source src=“url1” type=“mime-type” />$
  • $<source src=“url2” type=“mime-type” />$
  • $\dots$
  • $</audio>$
  • url1, url2,… are URLs for each audio file.
  • mime-type specifies the audio format.

Applying Styles to the Media Player

• The browser determines the appearance of a media player.
• CSS can be applied to set the width, add borders and drop shadows, and apply filters and transformations.

Exploring Embedded Objects

• Plug-ins in older browsers are marked using the <embed> element.
  • $<embed src=“url” type=“mime-type” width=“value” height=“value” />$
  • url is the location of the media file.
  • type provides the MIME type.
  • width and height set the dimensions of the media player.

Plug-In Attributes Example

• The src, type, height, and width attributes are generic attributes.
• Example:
  • $<embed src=“cp\_overture.mp3” width=“250” height=“50” controller=“yes” autoplay=“no” />$
  • This example uses attributes recognized by Apple’s QuickTime Player to display player controls and prevent automatic playback.

Plug-Ins as Fallback Options

• Add the <embed> element to the end of the <audio> element as a fallback for browsers that do not support HTML5 multimedia elements.
• The use of plug-ins has declined since the widespread adoption of HTML5.

Video Formats and Codecs

• A video file contains codecs for:
  • Audio
  • Video images
• H.264 is the most popular video codec but is not royalty-free.

Video Codecs

• H.264
  • Description: Industry standard for high-definition video streams used by YouTube and most commercial vendors.     *Developed by the MPEG group
• Theora
  • Description: Royalty-free codec developed by Xiph.org Foundation for use with almost any container.
• VP8
  • Description: Open-source, royalty-free codec owned by Google for use in the WebM format.
• VP9
  • Description: Google’s successor to VP8, offering the same video quality at half the download size.

Video Formats

• MPEG-4 (MP4)
  • Description: Widely used proprietary format developed by Apple based on QuickTime.
  • Video Codec: H.264
  • File Extensions: .mp4, .m4v
  • MIME Type: video/mp4
• Ogg
  • Description: Open-source format developed by Xiph.org Foundation using the Theora codec as an alternative to MPEG-4.
  • Video Codec: Theora
  • File Extension: .ogg
  • MIME Type: video/ogg
• WebM
  • Description: Open-source format introduced by Google to provide royalty-free video and audio for HTML5 video element
  • Video Codec: VP8, VP9
  • File Extension: .webm
  • MIME Type: video/webm

Browser Support for Video Formats

• Chrome: MPEG-4, Ogg, WebM
• Firefox: MPEG-4, Ogg, WebM
• Microsoft Edge: MPEG-4, Ogg, WebM
• Opera: MPEG-4, Ogg, WebM
• Safari: MPEG-4

Using the HTML5 video Element

• Videos are embedded using the video element:
  • $<video attributes>$
  • $<source src=“url1” type=“mime-type” />$
  • $<source src=“url2” type=“mime-type” />$
  • $\dots$
  • $</video>$
  • attributes control video playback behavior and appearance.
  • url1, url2,… are possible video sources.
  • mime-type specifies the format for each video file.

The poster Attribute

• Defines a video’s preview image using the poster attribute.
  • $<video poster=”url”>$
  • $\dots$
  • $</video>$
  • url points to an image file.
  • The poster attribute is used as a placeholder while the video is downloading.

Adding a Text Track to Video

• A text track can be added for visually impaired users.
• Allows audio and video content to be accessible to all users.
• Text tracks are added with the <track> element.

The <track> Element

• $<track kind=“type” src=“url” label=“text” srclang=“lang” />$
  • kind defines the track type.
  • src references the track text file.
  • label gives the track name.
  • srclang indicates the language.

<track> Element Kind Values

• captions: Brief text descriptions synced for hearing-impaired users.
• chapters: Chapter titles for navigation.
• descriptions: Longer descriptions for visually impaired users.
• subtitles: Translation of dialog (default); language specified in srclang.
• metadata: Metadata content for external scripts.

Making Tracks with WebVTT

• Tracks are stored as simple text files in WebVTT format.
• Format of a WebVTT file:
  • WEBVTT
  • cue1
  • cue2
  • $\dots$
  • Cues are matched with specific time intervals.
  • Cues are separated by a blank line.
  • Whitespace is not ignored.

WebVTT Cue Format

• label start --> stop cue text
  • label is the cue name.
  • start and stop define the time interval.
  • cue text is the text of the cue.

Placing the Cue Text

• Size and position of cue text:
• setting1:value1 setting2:value2 …
• Example: align:value, line:value, position:value, size:value, vertical:type
• No space between setting name and value

Cue Settings

• align:value: Horizontal alignment of text (start, middle, end).
• line:value: Vertical position of the cue (0% to 100%).
• position:value: Horizontal position of the cue (0% to 100%).
• size:value: Width of the cue as a percentage of the video width.
• vertical:type: Displays the cue text vertically (rl or lr).

Applying Styles to Track Cues

• Use the ::cue pseudo-element to format cues:
  • ::cue { styles }
  • Limited to background, color, font, opacity, outline, text-decoration, text-shadow, visibility, and white-space properties.

Formatting Specific Cues

• Use markup tags:
  • <i></i> for italicized text
  • <b></b> for bold-faced text
  • <u></u> for underlined text
  • <span></span> to mark spans of text
  • <ruby></ruby> to mark ruby text
  • <rt></rt> to mark ruby text

WebVTT Specific Tags

• <c></c>: Marks text strings belonging to a particular class (<c.classname></c>).
• <v></v>: Distinguishes between voices (<v name></v>).

Using Third-Party Video Players

• The <object> element is used for browsers with plug-ins:
  • $<object attributes>$
  • $parameters$
  • $</object>$
  • attributes define the object.
  • parameters are values passed to the object.

The <param> Element

• Defines parameters of the object:
  • $<param name=“name” value=“value” />$
  • name is the parameter's name.
  • value is the parameter’s value.

Exploring the Flash Player

• Adobe Flash Player is a commonly used plug-in for video playback.
  • $<object data=“url” type=“application/x-shockwave-flash” width=“value” height=“value”>$
  • $<param name=“movie” value=“url” />$
  • $parameters$
  • $</object>$

Flash Player Parameters

• bgcolor: Sets the background color of the player.
• flashvar: Contains text values to control the movie's behavior and content.
• id: Identifies the movie for referencing.
• loop: Plays the movie continuously (true | false).
• menu: Displays a popup menu (true | false).
• name: Names the movie.
• play: Starts the player when the page loads (true | false).
• quality: Sets playback quality (low, autolow, autohigh, medium, high, best).
• scale: Defines how the movie scales within the defined space (showall, noborder, exactfit).
• wmode: Sets the player's appearance against the page background (window, opaque, transparent).

Embedding Videos from YouTube

• YouTube videos can be easily embedded using YouTube’s HTML5 video player.
• Click the Share button below the YouTube video player.

Embedding Steps

• Click Embed to see a preview and HTML code.
• General code:
  • $<iframe width=“value” height=“value” src=“url” frameborder=“0” allowfullscreen>$
  • $</iframe>$
  • url links to the YouTube video.
  • width and height define the player's dimensions.
  • frameborder sets the border width.
  • allowfullscreen enables full-screen mode.

The <iframe> Element

• Used to mark inline frames, which are windows embedded within a webpage that display content from another page.

HTML5 Video Players

• HTML5 video players work within a browser using CSS and JavaScript.
• Presents a customizable player adapted to various needs.
• Example: YouTube player provides both the player and hosting service.

HTML5 Video Players Examples

• JWPlayer: Commercial player supporting HTML5 and Flash.
• VideoJS: Free player working with WordPress.
• Flowplayer: Commercially licensed player (one-time fee).
• Kaltura Player: Free open-source player customizable with user-created controls and skins.
• Wistia: HTML5 video player focused on business needs.

Introducing Transitions

• Transition: Change in an object’s style from an initial state to an ending state in response to an event.
• Slows down the change from one color to another, providing intermediate styles.

Creating Transitions

• Use the transition style:
  • transition: property duration;
  • property is the changing object property.
  • duration is the transition time in seconds or milliseconds.

Setting the Transition Timing

• Vary the transition speed:
  • transition: property duration timing-function;

Timing Function Keywords

• ease: Transition occurs more rapidly at the beginning and slows down near the end (default).
• ease-in: Transition starts slowly and maintains a constant rate until the finish.
• ease-out: Transition starts at a constant rate and then slows down toward the finish.
• ease-in-out: Transition starts slowly, reaches a constant rate, and then slows down toward the finish.
• linear: Transition is applied at a constant rate throughout the duration.

Cubic Bezier Function

• Timing function can be visualized as a graph showing the progress of transition vs duration
• Graphical representation using cubic-bezier(n, n, n, n).
• The n parameter values define the shape of the timing curve.

Delaying a Transition

• The start of a transition can be delayed:
  • transition: property duration timing-function delay;
  • delay is measured in seconds or milliseconds.

Creating a Hover Transition

• Transition property added to slow down the transition from initial to end state.

Limitations of Transition

• Can only be run when a CSS property is being changed, such as during the hover event.
• Run once and cannot be looped for repetition.
• Only initial and end states can be defined, not intermediate styles.
• Animation is created to overcome the limitations

Animating Objects with CSS

• Key frame: Sequence of changing images to create illusive movement for animation.
• CSS replaces key frame images with key frame styles applied in rapid succession.

The @keyframes Rule

• Defines a sequence of key frames:
  • @keyframes name {
  • keyframe1 {styles;}
  • keyframe2 {styles;}
  • …}
  • name is the animation name.
  • keyframe1, keyframe2, etc., define the progress of individual key frames.
  • styles are applied within each key frame.

Applying an Animation

• Key frames animation is applied to an object using animation-name and animation -duration properties
• animation-name: keyframes;
• animation-duration: times;
• keyframes is a comma-separated list of animations applied to the object using the names from the @keyframes rule
• times are the lengths of each animation expressed in seconds or milliseconds

Animation Properties

• animation-name: Assigns the key frames animation to the object.
• animation-duration: Sets the animation length (default = 0s).
• animation-timing-function: Defines default timing between key frames (default = ease).
• animation-delay: Sets the delay before starting the animation (default = 0s).
• animation-iteration-count: Specifies the number of times the animation is played (default = 1).
  • value is an integer.
  • infinite repeats the animation without stopping.
• animation-direction: Defines the animation direction.
  • normal: Plays the animation as defined (default).
  • reverse: Reverses the order.
  • alternate: Plays normal then reverse.
  • alternate-reverse: Plays reverse then normal.
• animation-fill-mode: Defines what styles from the animation are applied outside the time it is running
  • none: Does not apply any styles,
  • backwards: Applies the styles from the first key frame,
  • forwards: Applies the styles from the last key frame
  • both: Applies styles in both directions (default=none)
• animation-play-state: Defines whether the animation is running or paused (default = running).

Controlling an Animation

• Animation can have two states of operation Play or pause
• A check box can be used to control animation
• Selecting the check box will play the animation, unselecting will pause it.

Alternative Control Symbols

• A check box can be replaced with more attractive icons
• Display symbol to run the animation (Unicode value of \21bb)
• Display symbol I to pause the animation (Unicode values of \270b)