HTML5 AND CSS3

Neal 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” />