Adding Video to Your Web Page – Rimaz Rauf

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.

Method One - Link to the Video File

<a src=”http://youtu.be/7_L_5vrHoWQ” /> 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:

• 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:

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=”http://mediaservices.myspace.com/services/media/embed.aspx/m=5385825,t=1,mt=video,searchID=,primarycolor=,secondarycolor=”/> <embed src=”http://mediaservices.myspace.com/services/media/embed.aspx/m=5385825,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