Getting Started with HTML5 Video
The Current State of HTML5 Video Support
Project Files
Video Container Formats
- MPEG 4 – .mp4 or .m4v
- Flash Video – .flv extension
- Ogg – .ogv – open standard – Firefox 3.5+, Chrome 4+, and Opera 10.5+
- WebM – .webm
- Audio Video Interleave – .avi extension
Playing a Fragment of Video
<source width='640' height='360' src='hudson-shelter-falls.mp4#t=10,13' type="video/mp4" />
Encoding Tools
The Markup
<video poster="hudson-shelter-falls-poster.jpg" controls="controls" width="640" height="360"> <source width="640" height="360" src="hudson-shelter-falls.mp4" type="video/mp4" /> <source width="640" height="360" src="hudson-shelter-falls.webm" type="video/webm" /> <source width="640" height="360" src="hudson-shelter-falls.ogv" type="video/ogg" /> </video>
Attributes
autoplay
A Boolean attribute; if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
buffered
An attribute you can read to determine which time ranges of the media have been buffered. This attribute contains a TimeRanges object. More information >
controls
If this attribute is present, Gecko will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.
height
The height of the video’s display area, in CSS pixels.
loop
A Boolean attribute; if specified, we will, upon reaching the end of the video, automatically seek back to the start.
muted
A Boolean attribute which indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is false, meaning that the audio will be played when the video is played.
played
A TimeRanges object indicating all the ranges of the video that have been played.
poster
A URL indicating a poster frame to show until the user plays or seeks. If this attribute isn’t specified, nothing is displayed until the first frame is available; then the first frame is displayed as the poster frame.
src
The URL of the video to embed. This is optional; you may instead use the element within the video block to specify the video to embed.
width
The width of the video’s display area, in CSS pixels.