Jouer une vidéo dans une page html

Nous allons examiner trois méthodes permettant de jouer une vidéo dans une page html :

1) Lecture à l'aide d'un simple lien "href" ;
2) Lecture à l'aide d'une balise object;
3) Lecture à l'aide d'un flux continu.

Les méthodes 1 et 2 imposent de commencer la lecture de la vidéo seulement quand celle-ci est entièrement chargée sur l'ordinateur.
La méthode 1 permet que l'internaute enregistre facilement la vidéo sur son ordinateur (en cliquant le lien avec le bouton droit de la souris).
La méthode 3 consiste à lire la vidéo en flux video continu. Cette méthode permet de commencer la lecture du flux vidéo, dès qu'il commence à être reçu sur l'ordinateur. Elle utilise le plugin Flash, qui doit être présent sur l'ordinateur de l'internaute.
Dans notre exemple, nous supposerons que :
- La vidéo à lire s'appelle "mavideo.mpg", possède une taille d'image de 180x120 pixels, et se trouve placée dans un répertoire appelé "vidéo";
- La page "mavideo.html" qui lit la vidéo se trouve placée à la racine du site web.

Le code utilisé ci-après respecte la norme xhtml 1.0.

Lire une vidéo à l'aide d'un simple lien "href"

Placez le code suivant dans la page "mavideo.html".

Quand on clique le lien, la vidéo démarre après un certain délai, qui dépend de la taille du fichier.

Lire une vidéo à l'aide d'une balise object

Le code suivant permet de lire la vidéo dans la page html sans afficher la barre de contrôle. La vidéo démarre après un certain délai, qui dépend de la taille du fichier.

<!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>

Lecture à l'aide d'un flux continu

Nous allons utiliser des outils gratuits, et non pas le logiciel commercial Adobe Flash. La mise en oeuvre d'un flux continu avec des outils gratuits peut se décomposer de la façon suivante :

1) Encoder le fichier vidéo au format flv, avec le nom "mavideo.flv". Pour cela on peut utiliser l'outil "Format Factory" qui est gratuit.

2) Se procurer un lecteur flash au format swf. Vous pouvez utiliser le lecteur Jaris FLV player ("jarisplayer.swf"), par exemple, qui est gratuit et qui correspond parfaitement au besoin.

3) Placez le code suivant dans la page html "mavideo.html"

4) Copier sur le serveur web les fichiers "mavideo.html", "jarisplayer.swf" et "mavideo.flv". Ce dernier dans un répertoire "video".

Quand on appelle la page "mavideo.html", la vidéo démarre presque aussitôt en flux continu, indépendamment de la taille du fichier "mavideo.flv".