Display Video Using HTML5: Part 1

Description

In this article, I will describe to you how to embed a video in your website using HTML 5 and display it.

Content

Today, most videos are shown through a plugin (like flash), Silverlight, etc. However, not all browsers have the same plugins.

Now HTML5 specifies a standard way to include video, with the video element.

Video Formats

Currently, there are 3 supported video formats for the video element in HTML 5:

Below are the supported browser list.

Format	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Ogg = Ogg files with Theora video codec and Vorbis audio codec
MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec
WebM = WebM files with VP8 video codec and Vorbis audio codec

The HTML5 <video> tag is used to specify video on an HTML document.

For example, we could embed a music video on our web page for visitors to listen to and watch.

The HTML5 <video> tag accepts some attributes that specify how the video should be played. Attributes include preload, autoload, loop and more.

There are no closing <video> tags.

Now below I will show you an example of how to display a video in HTM 5. It's very simple

Step 1: Create a folder first with giving the folder name"video"

Step 2: copy .ogg format video into this folder.

Step 3: Create a simple text file name "video" and save the text file as "video.html".

Step 4: Now open the video.html file in text mode and paste the below code

<!DOCTYPE html>
<html>
<head>
<style>
body {
background: black;
color:#CCCCCC;
}
#c2 {
background-image: url(foo.png);
background-repeat: no-repeat;
}
div {
float: left;
border :1px solid #444444;
padding:10px;
margin: 10px;
background:#3B3B3B;
}
</style>
</head>
<p>Godda Video</p>
<br>
<body onload="processor.doLoad()">
<div>
<video id="video" src="You're my Love.ogg" controls="true" width="300" height="150" loop="true"/>
</div>
</body>
</body>
</html>

See in the above HTML code in the video tag I have given my video an id, with the video source.

That video is included in my folder. I also mentioned the height and width.

Now run the web page in chrome or Mozilla, firefox it will look like the below

The interesting part of HTML 5 is that when you right-click above the video player, we will get a lot of option for downloading the video, copy the link location, full screen, unlike the flash player.

Conclusion

So in this article, we have seen the basic funda of displaying video using HTML 5.

In my next article, I will show you other HTML 5 controls and more video operation in HTML 5 using .NET.