ITI 134 HTML 5 Desktop and Mobile Level
ITI 134: HTML 5 Desktop and Mobile Level II Session 3 Chapter 11 How to Work with Audio and Video www. profburnett. com
Class Outline § Intro to Media § How to Add Audio and Video 2/12/2022 Copyright © Carl M. Burnett 2
Common Video Media Video Type File Extension Description MPEG-4 . mp 4, . m 4 v Motion Picture Engineering Group (MPEG) Version 4 Video Format Quicktime . mov Apple MPEG video format Flash Video . flv, . f 4 v Adobe Flash Video Ogg . ogg Theora video file Web. M 2/12/2022 New format for Chrome, Firefox and Opera Copyright © Carl M. Burnett Slide 3
Common Video Media 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 2/12/2022 Silverlight supports H. 264 video, Advanced Audio Coding, Windows Media Video (WMV), Windows Media Audio (WMA) and MPEG Layer III (MP 3) media content[17] across all supported browsers without requiring Windows Media Player, the Windows Media Player Active. X control or Windows Media browser plugins. 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. Copyright © Carl M. Burnett 4
Common Audio Media Type File Extension Description MP 3 MPEG-1 Audio Layer 3 . mp 3 AAC Apple’s Advanced Audio Coding Ogg . ogg Open Source Open Standard Audio format WMA . wma Windows Media Audio 2/12/2022 Copyright © Carl M. Burnett Slide 5
Video Codecs Codec Description 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 JTC 1 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, You. Tube, and the i. Tunes Store, web software such as the Adobe Flash Player and Microsoft Silverlight, and various HDTV broadcasts over terrestrial, cable and satellite services. 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. VP 8 is a video compression format owned by Google and created by On 2 Technologies as a successor to VP 7. 2/12/2022 Copyright © Carl M. Burnett Slide 6
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. 2/12/2022 Copyright © Carl M. Burnett Slide 7
Audio Codecs Codec Description AAC has been standardized by ISO and IEC, as part of the MPEG-2 and MPEG-4 specifications. FLAC is an open format with royalty-free licensing and a reference implementation which is free software. MP 3 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 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. 2/12/2022 Copyright © Carl M. Burnett Slide 8
Video Codec support in Browsers Browser IE Ogg Theora - H. 264 9. 0+ Web. M 9. 0+ (with VP 8 codec) Firefox 3. 5+ - 4. 0+ Safari - 3. 0+ - Chrome 5. 0+ 10. 0+ 6. 0+ Opera 10. 5+ - 10. 6+ 2/12/2022 Copyright © Carl M. Burnett Slide 9
Audio Codec support in Browsers Browser IE Ogg Vorbis - MP 3 9. 0+ AAC 9. 0+ (with VP 8 codec) Firefox 3. 6+ - - Safari With Quick. Time 3. 0+ 5. 0+ Chrome 5. 0+ 10. 0+ 6. 0+ Opera 10. 5+ - - 2/12/2022 Copyright © Carl M. Burnett Slide 10
MIME Types for Audio and Video Media type MIME type Codec MP 3 audio/mp 3 Ogg Vorbis audio/ogg Web. M video/webm theora, vorbis Ogg Theora video/ogg theora, vorbis Flash application/x-shockwave-flash 2/12/2022 Copyright © Carl M. Burnett Slide 11
The Object and Param Elements Element Description object Embeds a media file into a web page. param Provides parameters to the media player that’s used to open a file. Attributes of the Object 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 2/12/2022 Copyright © Carl M. Burnett Slide 12
Object Element for Flash File 2/12/2022 Copyright © Carl M. Burnett Slide 13
Attributes of the Embed Elements Element Description type The MIME Type data URL width Width height Height 2/12/2022 Copyright © Carl M. Burnett Slide 14
Common Attributes for Audio and Video Elements Attribute 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 2/12/2022 Copyright © Carl M. Burnett Slide 15
Attributes for Source Element Attribute Description src URL type The MIME Type 2/12/2022 Copyright © Carl M. Burnett Slide 16
2/12/2022 Copyright © Carl M. Burnett Slide 17
Student Exercise 1 § Complete Exercise 11 -1 on page 399 using Dreamweaver. § Upload your HTML pages and CSS files to the live site to preview. 2/12/2022 Copyright © Carl M. Burnett 18
Class Review § Intro to Media § How to Add Audio and Video Next – Chapter 12 - How to format web pages for printing 2/12/2022 Copyright © Carl M. Burnett 19
- Slides: 19