Playing a video in a HTML page

We will consider three methods to play a video in a html page :

1) Playing using a simple "href" link;
2) Playing using a tag object;
3) Playing using continuous stream.

The methods 1 and 2 require to begin the playing of the video only when that this is completely downloaded on the computer.
The method 1 allows that the Internet user easily record the video on his computer (clicking the link with the right button of the mouse).
The method 3 consists in playing the video in continuous stream (video streaming). That method allows to begin the playing of the video stream, as soon as it begins to be received on the pc. It uses the plugin Flash, which must be present on the computer of the Internet user.
In our sample, we will suppose that:
- The video to play is called " mavideo.mpg", has a size of 180x120 pixels, and is placed in a directory called "video".
- The page " mavideo.html " which play the video is placed in the root of the web site.

The code used below respects the xhtml 1.0 standard.

Playing a video using a simple "href" link

Place the following code in the page "mavideo.html".

When we click the link, the video begins to play after a delay which depends on the size of the file.

Playing a video using a tag object

The following code allows to play the video in the html page without displaying the control bar. The video begins to play after a delay which depends on the size of the file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lecture vidéo</title>
</head>
<body>
<object type="application/x-mplayer2" data="video/mavideo.mpg" width="180" height="120">
<param name="src" value="video/mavideo.mpg" />
<param name="hidden" value="true" />
<param name="loop" value="true" />
<param name="autoplay" value="true" />
<param name="autoStart" value="true" />
<param name="showcontrols" value="false" />
<param name="showtracker" value="false" />
<param name="showstatusbar" value="false" />
<a href="video/mavideo.mpg"></a>
</object>
</body>
</html>

Playing using continuous stream

We are going to use free tools, and not the commercial Adobe Flash software. The implementation of a streaming with free tools can be decomposed in the following steps:

1) Encode the video file in the flv format, with the name "mavideo.flv". For this we can use the tool "Format Factory" which is free.

2) Get a swf flash player. For example you can use the reader Jaris FLV to player ("jarisplayer.swf") which is free and which corresponds perfectly to the need .

3) Place the following code in the html page "mavideo.html"

4) Copy on the host the files "mavideo.html", "jarisplayer.swf" and "mavideo.flv". This last one in a directory "video".

When we call the page "mavideo.html", the video starts almost immediately in continuous stream, independently of the size of the file "mavideo.flv".