PLAY MOVIES WITH THE HTML5 VIDEO ELEMENT

After you have your movie encoded in the HTML5-friendly codecs, you are ready to place the video on your web page. You do so by using the <video> tag group, its optional attributes, and <source> tags — one for each movie file format:

<video height='640' width='480'
 poster='image' controls preload>
   <source src='movie.mp4' type='video/mp4;
 codecs="avc1.640029,   mp4a.40.2"'>
   <source src='movie.webm' type='video/webm;
 codecs="vp8, vorbis"'>
   <source src='movie.ogv' type='video/ogg;
 codecs="theora, vorbis"'>
   Fallback display.
</video>

Although the height and width variables are not required, they are highly recommended. Otherwise, only when the video is preloading or starts playing will the element adjust ...

Get HTML5: Your visual blueprint™ for designing rich web pages and applications now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial