O'Reilly logo

HTML5: Your visual blueprint™ for designing rich web pages and applications by Adam McDaniel

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required