The HTML5 <video> tag makes it possible to embed video clips in web pages much like how the <img> tag works for images. The <video> element is brand new in HTML 5 and allows you to, get this, play a movie in your website.The <video> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari but Internet Explorer 8 and earlier versions, do not support the <video> tag.
Other useful related articles:
- How To Use the HTML5 Audio Element
- Advantages of Converting PSD to HTML5
- Essential Guide to HTML5 Document Structure
Using <video> is not difficult at all, and in fact is a lot like using <img>. The basic attributes you should know about are src, width, and height, which all work as they do with <img>. Here, We will learn together the usage of the <video> tag to play video in the websites.
<video width="640" height="360" src="movie.mp4"></video>
Here is the list of optional attributes of <video> element:
Width (number) – width of the video on the page, in pixels – is required.
Height (number) – height of the video on the page, in pixels – is required.
src (string) – The URL of the video to play.
Autoplay () – include this attribute to let the video start as the page gets loaded.
Controls () – include this attribute to display a simple controlbar.
Loop () – include this attribute to let the browser continuously repeat playback of the video.
Poster (string) – The url of a poster frame that is shown before the video starts. Can be any PNG, JPG or GIF image preview.
preload (‘auto’, ‘metadata’, ‘none’) – This attribute defines whether the entire video is loaded upon webpage load, or whether only the metadata is initially loaded. The default (on most browsers) is metadata.
Example of an HTML5 video tag with attributes:
<video width="640" height="360" controls preload="none" poster="movie.jpg" src="movie.mp4" </video>
<video width="640" height="360" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> This browser does not support the video tag. </video>
Autobuffer attribute is used when autoplay is not used but the page/site owner thinks the video will be watched at some point. The video is downloaded in the background, so when the user starts the video, it will be able to play at least some of the content. If both autoplay and autobuffer are used, then autobuffer is ignored.
The <video> element makes it very easy to get your video content onto the Web, so long as your server can handle the load. I hope you have enjoyed this article. Feel free to share your thoughts with us by filling in the comments section below.