Understanding HTML5 Video Element

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:

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.

Basic Example:

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

Multiple Sources:

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

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.

In closing

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.