The HTML <video> element embeds moving pictures in a web page. It is a friendly doorway into browser media—although the files waiting behind it can be less friendly. A video format combines a container, which packages media data and metadata, with codecs that encode, compress, decode, and decompress the media. section 6.14 section 6.15
For one video format, place these attributes directly on the element:
- src points to the video file; poster names the still image shown before playback. section 6.15
- width and height set the playback window’s dimensions. section 6.15
- controls displays playback controls, autoplay starts playback after enough data downloads, and loop restarts playback when it ends. section 6.15
When browser support or delivery requirements call for several formats, omit src from <video> and add one <source> element per file. Each source supplies a src and a type string describing the format and its video and audio codecs. Common choices include WebM, Ogg, and MPEG-4. section 6.14 section 6.15
A video with fallback formats
A single video window can offer an MPEG-4 file first, followed by WebM and Ogg alternatives. The browser can use the supplied source entries and codec descriptions when choosing a format. section 6.15
<video poster=”/images/movie-poster.jpg”
width=”625”
height=”480”
controls
autoplay
loop>
<source src=”/videos/movie.mp4”
type=’video/mp4; codecs=”avc1.4D401E, mp4a.40.2”’>
<source src=”/videos/movie.webm”
type=’video/webm; codecs=”vp8, vorbis”’>
<source src=”/videos/movie.ogv”
type=’video/ogg; codecs=”theora, vorbis”’>
</video>
Use this complete pattern as a visual reference for poster imagery, playback settings, and multiple source elements. section 6.15
