View
217
Download
1
Category
Tags:
Preview:
Citation preview
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”
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
Recommended