Display Video Using HTML5: Part 1


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


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>
      body { 
        background: black; 
      #c2 { 
        background-image: url(foo.png); 
        background-repeat: no-repeat; 
      div { 
        float: left; 
        border :1px solid #444444; 
        margin: 10px; 


<p>Godda Video</p>

   <body onload="processor.doLoad()"> 
      <video id="video" src="You're my Love.ogg" controls="true" width="300" height="150" loop="true"/> 



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.


Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now