Display Video Using HTML5: Part 1

Shirsendu Nandi
13y
21k
0
0

Article

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>

</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 lot of option for download 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.