1. HTML5 Level II Session II
Chapter 12 - How to Work with Audio and Video

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

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

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

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

15. 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

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

17. 9/20/2018
Copyright © Carl M. Burnett

18. 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

19. 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