Embedding Video in HTML 5 Pages

The HTML5 audio and video tags make it simple to add media to a website. You need to set src attribute to identify the media source and include a controls attribute so the user can play and pause the media.

Here is the simplest form of embedding a video file in your webpage:

<video src="foo.mp4"  width="300" height="200" controls>
    Your browser does not support the <video> element.   
</video>

The current HTML5 draft specification does not specify which video formats browsers should support in the video tag. But most commonly used video formats are:

Ogg: Ogg files with Thedora video codec and Vorbis audio codec.

mpeg4: MPEG4 files with H.264 video codec and AAC audio codec.

You can use source tag to specify media along with media type and many other attributes. A video element allows multiple source elements and browser will use the first recognized format:

<!DOCTYPE HTML>
<html>
<body>
   <video  width="300" height="200" controls autoplay>
       <source src="/html5/foo.ogg" type="video/ogg" />
       <source src="/html5/foo.mp4" type="video/mp4" />
       Your browser does not support the <video> element.
   </video>
</body>
</html>

Enjoyed this post? Share it!

 

Leave a comment

Your email address will not be published.