turrier.fr

Source : ct|06.01.09

< Tutoriels Informatique, Multimédia, Chinois

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.

image1

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

image2

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

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

<!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 - méthode 1</title>
</head>
<body>
<a href="video/mavideo.mpg"> Lecture vidéo : méthode 1 </a>
</body>
</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.

image3

image4

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>

image5

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.

image6

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.

image7

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

<!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 en flux continu</title>
</head>
<body>
<object type="application/x-shockwave-flash" width="180" height="120" data="jarisplayer.swf">
<param name="movie" value="jarisplayer.swf" />
<param name="flashvars" value="file=video/mavideo.flv" />
</object>
</body>
</html>

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

image8

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".

image9


Valid XHTML 1.0 Transitional

© http://turrier.fr (2007)