Display Video Using HTML5: Part 1

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.

Up Next
    Ebook Download
    View all
    Learn
    View all