HTML5 AND CSS3Neal Stublen

nstublen@jccc.edu

CHAPTER 5

AUDIO AND VIDEO

Pre-HTML5 Solutions Audio and video were embedded in

pages using plug-insApple QuicktimeMicrosoft SilverlightAdobe Flash

Native Audio and Video HTML5 provides audio and video

elements for built-in media supportNot supported pre-IE9

AudioRoughly 85% support

VideoRoughly 85% support

Video Container Format Containers are specific file formats for

transporting audio and videoWraps a video track, audio track, and data

to synchronize the tracksLanguage informationMedia metadata

Containers for HTML5 include MPEG-4, Ogg, WebM

Audio and Video Codecs Codecs define algorithms used to

encode or decode a media streamCoder/decoder

Video codecs relevant to HTML5 include H.264, Theora, and VP8

Audio codecs relevant to HTML5 include AAC and Vorbis

Browser Support Audio and video streaming requires

browser support for the container and codecs used for a specific media stream

Audio and video tags provide a standard way of incorporating media on a web page, but the browser/OS still need to support chosen data formats

http://caniuse.com details support

Including Video Basic tag use: <video src=“example.webm”></video>

Typical tag use: <video src=“example.webm” width=“800” height=“480” controls></video>

Built-in Controls The controls attribute specifies that the

browser should display built-in controls for controlling playback

Controls are browser-specificNo standard appearanceStandard appearance would require use of

additional markup and JavaScript

The autoplay attribute Media will not begin playing

automatically The autoplay attribute will start playback

after the page has loaded

<video src=“example.webm” autoplay></video>

The loop attribute Seeks back to the start of the media

after reaching the end Most likely use may be background

sounds or music (perhaps in a game)

<video src=“example.webm” loop></video>

The preload attribute preload=“auto”

Begins loading the media stream before the user presses the play button

Faster response preload=“none”

Prevents loading the video before pressing playLess bandwidth

preload=“metadata”Loads media metadata (duration, dimensions)

Browsers determine the default value

The poster attribute Specifies an image that should appear

as the “teaser” for a video elementposter=“teaser.png”

The audio attribute Allows the audio track to be muted by

defaultaudio=“muted”

Handling Supported Formats Provide source elements instead of a src

attribute

<video controls> <source src=“example.mp4” type=“video/mp4” /> <source src=“example.webm” type=“video/webm” /> </video>

Specifying Codecs<source src=“example.mp4” type=‘video/mp4; codecs=“avc1.42E01E, mp4a.40.2” /><source src=“example.webm” type=‘video/webm; codecs=“vp8, vorbis” />

source Order Browsers will use the first compatible

source element even if they support multiple available formats

Fallback Support Browsers that don’t support the audio and

video tags will simply render the content within the tags

An object tag can be used to embed support for older methods, such as Flash

Modern browsers will ignore the additional content within the tag that’s not a source element

Fallback support could be a download link

MIME Types The type attribute specifies the MIME

type for the mediaMultipurpose Internet Mail Extensions

Your web server may need to be properly configured to serve specific MIME types correctly

Video Encoding If you have video that is not in a

supported format, it will need to be encoded againMiro Video Converter

You should be able to encode a single source into the multiple formats that cover most browsers

Custom Controls Audio and video tags can be accessed

from JavaScript just like any other elements

Additional markup can be used to create your own controls

Audio and Video Events canplay – indicates playback can begin error loadeddata loadedmetadata playing – also indicates looping seeking seeked

Audio and Video Attributes playbackRate src (from attribute) currentSrc (from attribute or element) readyState duration buffered videoWidth/videoHeight (source sizes)

Audio Differences Invisible unless controls are specified Allows possibility of using multiple audio

elements for background sounds MP3 and Ogg/Vorbis formats will cover

all major browsers

Text Tracks Including track elements within a video

element allows inclusion of subtitles, captions

<track kind=“subtitle” src=“subtitles.en.vtt” srclang=“en” label=“English” />