Neal Stublen

Pre-HTML5 Solutions  Audio and video were embedded in pages using plug-ins Apple Quicktime Microsoft Silverlight Adobe Flash

Native Audio and Video  HTML5 provides audio and video elements for built-in media support Not supported pre-IE9  Audio Roughly 85% support  Video Roughly 85% support

Video Container Format  Containers are specific file formats for transporting audio and video Wraps a video track, audio track, and data to synchronize the tracks Language information Media metadata  Containers for HTML5 include MPEG-4, Ogg, WebM

Audio and Video Codecs  Codecs define algorithms used to encode or decode a media stream Coder/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  details support

Including Video  Basic tag use:  Typical tag use: <video src=“example.webm” width=“800” height=“480” controls>

Built-in Controls  The controls attribute specifies that the browser should display built-in controls for controlling playback  Controls are browser-specific No standard appearance Standard 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>

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>

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 play Less 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 element poster=“teaser.png”

The audio attribute  Allows the audio track to be muted by default audio=“muted”

Handling Supported Formats  Provide source elements instead of a src attribute <source src=“example.mp4” type=“video/mp4” /> <source src=“example.webm” type=“video/webm” />

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 media Multipurpose 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 again Miro 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” />