HTML5 Level II Session II Chapter 12 - How to Work with Audio and Video www.profburnett.com

Class Outline Intro to Media How to Add Audio and Video 9/20/2018 Copyright © Carl M. Burnett

Common Video Media Video Type File Extension Description MPEG-4 .mp4, .m4v Motion Picture Engineering Group (MPEG) Version 4 Video Format Quicktime .mov Apple MPEG video format Flash Video .flv, .f4v Adobe Flash Video Ogg .ogg Theora video file WebM New format for Chrome, Firefox and Opera 9/20/2018 Copyright © Carl M. Burnett

Common Video Media Silverlight Video Type File Extension Description ASF .asf, .wmv Microsoft Advanced Streaming Format for the Windows Media Player AVI .avi Microsoft Audio Video Interleave format Silverlight Silverlight supports H.264 video, Advanced Audio Coding, Windows Media Video (WMV), Windows Media Audio (WMA) and MPEG Layer III (MP3) media content[17] across all supported browsers without requiring Windows Media Player, the Windows Media Player ActiveX control or Windows Media browser plug-ins. Because Windows Media Video 9 is an implementation of the Society of Motion Picture and Television Engineers (SMPTE) VC-1 standard, Silverlight also supports VC-1 video. 9/20/2018 Copyright © Carl M. Burnett

Common Audio Media Media Type File Extension Description MP3 .mp3 MPEG-1 Audio Layer 3 AAC Apple’s Advanced Audio Coding Ogg .ogg Open Source Open Standard Audio format WMA .wma Windows Media Audio 9/20/2018 Copyright © Carl M. Burnett

Video Codecs Codec Description 9/20/2018 Copyright © Carl M. Burnett H.264/MPEG-4 AVC H.264/MPEG-4 AVC is a video compression standard developed by the ITU-T Video Coding Experts Group (VCEG) together with the ISO/IEC JTC1 Moving Picture Experts Group (MPEG). H.264 is perhaps best known as being one of the video encoding standards for Blu-ray Discs. It is also widely used by streaming internet sources, such as videos from Vimeo, YouTube, and the iTunes Store, web software such as the Adobe Flash Player and Microsoft Silverlight, and various HDTV broadcasts over terrestrial, cable and satellite services. Theora Theora is a free lossy video compression format.[6] It is developed by the Xiph.Org Foundation and distributed without licensing fees alongside their other free and open media projects, including the Vorbis audio format and the Ogg container. VP8 VP8 is a video compression format owned by Google and created by On2 Technologies as a successor to VP7. 9/20/2018 Copyright © Carl M. Burnett

What a Media Player Does Determines the media type that the user is attempting to play. Determines whether it has the capability of decoding its video and audio streams. Decodes the video and displays it on the screen. Decodes the audio and sends it to the speakers. Interprets any metadata and makes it available. 9/20/2018 Copyright © Carl M. Burnett

Audio Codecs Codec Description AAC FLAC MP3 Vorbis WMA 9/20/2018 AAC has been standardized by ISO and IEC, as part of the MPEG-2 and MPEG-4 specifications. FLAC FLAC is an open format with royalty-free licensing and a reference implementation which is free software. MP3 MP3 is an audio-specific format that was designed by the Moving Picture Experts Group (MPEG) as part of its MPEG-1 standard and later extended in MPEG-2 standard. Vorbis Vorbis is a free and open-source audio format specification and software implementation (codec) for lossy audio compression. Vorbis is most commonly used in conjunction with the Ogg container format and it is therefore often referred to as Ogg Vorbis. WMA Windows Media Audio (WMA) is an audio data compression technology developed by Microsoft. 9/20/2018 Copyright © Carl M. Burnett

Video Codec support in Browsers Ogg Theora H.264 WebM IE - 9.0+ 9.0+ (with VP8 codec) Firefox 3.5+ 4.0+ Safari 3.0+ Chrome 5.0+ 10.0+ 6.0+ Opera 10.5+ 10.6+ 9/20/2018 Copyright © Carl M. Burnett

Audio Codec support in Browsers Ogg Vorbis MP3 AAC IE - 9.0+ 9.0+ (with VP8 codec) Firefox 3.6+ Safari With QuickTime 3.0+ 5.0+ Chrome 10.0+ 6.0+ Opera 10.5+ 9/20/2018 Copyright © Carl M. Burnett

MIME Types for Audio and Video Media type MIME type Codec MP3 audio/mp3 Ogg Vorbis audio/ogg WebM video/webm theora, vorbis Ogg Theora video/ogg Flash application/x-shockwave-flash 9/20/2018 Copyright © Carl M. Burnett

The Object and Param Elements Description object Embeds a media file into a web page. param Provides parameters to the media player that’s used to open a file. The Object and Param Elements Element Description type The MIME Type data URL width Width height Height Attributes of the Param Elements Element Description name The name of the parameter value The value of the parameter 9/20/2018 Copyright © Carl M. Burnett

Object Element for Flash File 9/20/2018 Copyright © Carl M. Burnett

Attributes of the Embed Elements Description type The MIME Type data URL width Width height Height 9/20/2018 Copyright © Carl M. Burnett

Common Attributes for Audio and Video Elements Description src URL poster Path to static image preload None (Default), Metadata, Auto autoplay Starts playing media when page loaded loop Repeats muted Volume muted controls Default Toolbar displayed width Width height Height 9/20/2018 Copyright © Carl M. Burnett

Attributes for Source Element Description src URL type The MIME Type 9/20/2018 Copyright © Carl M. Burnett

9/20/2018 Copyright © Carl M. Burnett

Student Exercise 1 Complete Exercise 12-1 on page 453 using Dreamweaver. Upload your HTML pages and CSS files to the live site to preview. 9/20/2018 Copyright © Carl M. Burnett

Chapter 13 - How to Work with Fonts and Printing Class Review Intro to Media How to Add Audio and Video Next – Chapter 13 - How to Work with Fonts and Printing 9/20/2018 Copyright © Carl M. Burnett