Description:
In this Article I will describe to you how to embedded 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 folder name"video"
Step 2: copy .ogg format video in to 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
![VideoHTML1.gif]()
The interesting part of HTML 5 is that when you right click above the video
player we will get lot of option for download the video, copy the link location,
full screen, unlike the flash player.
![VideoHTML2.gif]()
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.