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 O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.