Neal Stublen nstublen@jccc.edu HTML5 and CSS3
Chapter 5Audio and Video
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 • 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-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></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 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 <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 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” />
