Videos can be added to your Web pages to explain the concepts or process instead of describing it in lengthy paragraphs or steps. Video files are huge, viewing them on Net will take several minutes to download. Visitors also must have the right plug-in to view them in your browser. It is recommended to give links to the video files, rather than embedding them in Web page. If you embed the video file you are forcing visitors to download it or stream it online.

Some of the more common video formats are:

  • .swf – Shockwave/Flash File (by Macromedia/Adobe)
  • .wmv – Windows Media Player video format (by Microsoft)
  • .mov – Quicktime video format (by Apple)
  • .mpeg – Video compression format (specified by the Moving Pictures Experts Group)
  • .ogg – Open standard container format maintained by the Xiph.Org Foundation. Also includes .ogv, .oga, .ogx, and .spx extensions
  • .webM – royalty-free, high-quality open video compression format for use with HTML5 video.


AVI (Audio Video Interleave) This format, originally a Windows standard, is now somewhat more widely available. It’s a good choice if your visitors will almost exclusively be using Windows.
MPEG (Motion Picture Experts Group) This format is the most widely supported, and viewers are available for most platforms. Because it’s highly compressed and usable, MPEG is the best universal choice.
QuickTime This format, originally a Macintosh standard, is now available for Windows as well. It provides a good quality if your visitors have the plug-in and use personal computers.

Method One - Link to the Video File

<a src=”” /> Gnomeo & Juliet </a>

This is an easy method , which will have a Text link to the Video file & when you click the text link it will open the video in a player – most probably the default player in your machine.

Method Two - Embedding the Video File

<embed src=”your file location.mpeg” width=”500″ height=”400″ autostart=”true”></embed>

This is where you Embed the Video in to the web page, which will let you to view the video on the web browser.

Method Three - Embedding Using HTML5

Many modern websites shows videos. HTML5 provides a standard for showing them.

Until now, there has never been a standard for showing video on a web page.

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

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:

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

How It Works

To show a video in HTML5, this is all you need:

<video src=”your file location.ogg” controls=”controls”></video>

The control attribute is for adding play, pause, and volume controls.

It is also always a good idea to include the width and height attributes.

Insert content between the <video> and </video> tags for browsers that do not support the video element.

Example 1 : HTML5 <video> Tag

<video src=”/video/pass-countdown.ogg” width=”400″ height=”250″ controls><p>If you are reading this, it is because your browser does not support the ‘video’ element. Try using the ‘object’ element listed further down the page.</p></video>

The latest version of HTML (i.e. HTML5) makes it extremely easy to add video to a web page. HTML5 allows you to use a <video> tag, which, believe it or not, embeds video right into your web page!

Example 2 : HTML5 <object> Tag

<object width=”425px” height=”360px” > <param name=”allowFullScreen” value=”true”/> <param name=”wmode” value=”transparent”/> <param name=”movie” value=”,t=1,mt=video,searchID=,primarycolor=,secondarycolor=”/> <embed src=”,t=1,mt=video,searchID=,primarycolor=,secondarycolor=” width=”425″ height=”360″ allowFullScreen=”true” type=”application/x-shockwave-flash” wmode=”transparent”/></object>

You can also embed HTML video code into your web page using the <object> tag. To cater for browsers that don’t support the <object> tag, you can nest the <embed> tag inside the <object> tag.

The parameters inside the param attributes allow you to customize your video.

By – Rimaz Rauf


I am a young, passionate individual with an enthusiastic attitude who thrives in creative environments. I hold a solid understanding of the design process and display a keen interest in emerging technologies and innovative products. I'm considered to be a 'Jack of all trades' and a complete creative nutcase!


  1. This is a perfect explanation created by Mr.Rimaz. Actually this benefited me to complete my website based project and i am really thankful to him.I got much more ideas through this explanation to develop my website so much attractively and effectively…….

Write A Comment