How To Embed A Streaming Video Files To The Web Page(HTML)

There are couple of ways to embed video file on web page.

1.Use a hyper link (link to video file).
2.Embed the video file within the web page using special HTML code.

Hyperlink

A hyperlink is a direct link to a file (such as webpage, video, or image) using an HTML anchor tag.

In this case, the hyperlink is a link to hosted video file. This will allow the video file to be opened and played with the viewer's default video player. In other words, when the end user clicks the link and if it is linked to a Windows Media File, the Windows Media Player will open the video file and play it.

The HTML code to link to the video is as follows..

<a href="streaming-video-filename">Click here to watch the video</a>

Even though this does provide the end user the ability their preference of players, it provides the least amount of control over how others will view the video and it will not appear to them to be a part of the web page.

Embedded streaming video Files

Embedding a streaming video file is simply putting the file within the web page using HTML code so that it will be displayed within the webpage(not another program).

This will provide the best way to control the way that we want the video clip to be viewed.

The HTML code that we need will depend on the type of video file format that we use.
For example, here is the HTML tags to embed a Windows Media file:

<OBJECT ID="MediaPlayer" WIDTH=320 HEIGHT=331 CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
STANDBY="Loading Windows Media Player components" TYPE="application/x-oleobject">

<PARAM NAME="FileName"
VALUE="streaming-video-filename">

<PARAM name="ShowControls" VALUE="true">

<param name="ShowStatusBar" value="true">

<PARAM name="ShowDisplay" VALUE="true">

<PARAM name="autostart" VALUE="false">

<EMBED TYPE="application/x-mplayer2" SRC="streaming-video-filename" NAME="MediaPlayer"
WIDTH=320 HEIGHT=331 ShowControls="1" ShowStatusBar="1" ShowDisplay="1" autostart="0"> </EMBED>

</OBJECT>

The <object> and the <embed> are used to reach the greatest browser compatibility.

The <object> tag is used to include objects such as images, audio, videos, Java applets, ActiveX, PDF, and Flash.

The object element was intended to replace the img and applet elements. However, because of bugs and a lack of browser support this has not happened.

The object support in browsers depend on the object type. Unfortunately, the major browsers use different codes to load the same object type.

Luckily, the object element provides a solution. If the object element is not displayed, the code between the <object> and </object> tags will be executed. This way we can have several nested object elements (one for each browser).

The <object> has the support for Internet Explorer.

The "CLASSID" attribute is used to set the class ID value as set in the Windows Registry(for windows media player).

The "STANDBY" attribute is used to set the text to display while the object is loading.

The <embed> tag is for Mozilla Firefox and other compatible browsers.

The both tags are pretty much a duplicate of each other. So, remember, for each tag, we'll have to set the file name and any other parameters.