Easy-Micro

TECHNIQUE Technique Vidéo
Code vidéo
Code HTML pour vidéo

Easy-Micro vidéo Principe de base
Quatre techniques, correspondantes à quatre marques (Microsoft, Real, Apple et Adobe), sont utilisées pour intégrer une vidéo dans un site Internet. Suivant le format de votre vidéo (WMV, RM, MOV ou FLV) vous devez utiliser un code HTML particulier.

La structure du code de chaque technique est toujours basée sur une balise EMBED inclue dans une balise OBJECT. C'est au niveau des paramètres et de leur valeurs que le code peut-être différent suivant le format de votre vidéo.

Aujourd'hui, la seule technique (quasi universelle!) utilisée par l'ensemble du Web (YouTube, Dailymotion...) est sans conteste celle d'Adobe/Flash.



Format vidéo Code HTML pour une vidéo au format Flash (Adobe)
Vidéo visible avec le lecteur gratuit FlashPlayer (la plupart des navigateurs l'on déjà!)

<object style="width:320px; height:260px" type="application/x-shockwave-flash">
<param name="movie" value="player.swf?file=mavideo.flv" />
<param name="quality" value="high" />
<embed width="320" height="260" src="player.swf?file=mavideo.flv" type="application/x-shockwave-flash" quality="high" />
</object>

Exemple: Hélicoptère
-> Télécharger le fichier FLV : helicoptere.flv

Explication:
Est utilisé ci-dessus le FLV MediaPlayer (player.swf). Il s'agit d'une animation SWF toute faite - et gratuite pour une utilisation non commerciale - qui permet de lire un fichier FLV (ex: valse.flv). Peut-être téléchargée sur le site de son créateur: Jeroen Wijering. Ce fichier est enregistré dans le même dossier que la page HTML qui contient ce code.
Format vidéo Code HTML pour une vidéo de type Windows Media (Microsoft)
Vidéo visible avec le lecteur gratuit Windows Media

Voir la vidéo
 L'exemple ci-contre est une vidéo de 800 Ko encodée dans le format MPEG avec un code HTML pour le lecteur Windows Media de Microsoft. Le format vidéo MPEG est un format compatible avec la plupart des lecteurs vidéo, on aurait donc pu utiliser ici le code HTML d'un autre lecteur comme RealPlayer (voir la partie Format real) ou QuickTime (voir la partie Format QuickTime).



Pour réaliser cet exemple, téléchargez la vidéo à partir du lien ci-contre: blonde.mpeg par un clic droit de souris (enregistrer la cible sous...) puis placez le code Windows Media ci-dessous dans le code votre page:

<object id="MediaPlayer" width="300" height="260"
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/ nsmp2inf.cab#Version=6,4,5,715" standby="Chargement..." type="application/x-oleobject">
<param name="filename" value="mesvideos/blonde.mpeg" />
<param name="autostart" value="false" />
<param name="animationatstart" value="false" />
<param name="transparentatstart" value="false" />
<param name="showcontrols" value="true" />
<embed type="application/x-mplayer2" src="mesvideos/blonde.mpeg" name="MediaPlayer" width="300" height="260" showcontrols="1" showdisplay="0" showstatusbar="0"></embed>
</object>

Différents parramètres Windows Media permettent de définir l'intégration d'une vidéo dans une page html: le numéro du contrôle ActiveX correspondant à la version du lecteur (balise CLASSID), la source de la vidéo (balise FILNAME), vidéo lue dès l'affichage de la page Html (balise AUTOSTART), affichage du logo à l'ouverure (balise ANIMATIONATSTART), affichage du fond (balise TRANSPARENTATSTART), intégration d'un panneau de contrôle pour affichage des boutons (balise SHOWCONTROLS) et ainsi de suite...
Format vidéo Code HTML pour une vidéo au format Real Media (Real Networks)
Vidéo visible avec le lecteur gratuit RealPlayer

<object classid="CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA" width="358" height="258">
<param name="console" value="Clip1" />
<param name="controls" value="ImageWindow" />
<param name="autotstart" value="true" />
<param name="src" value="mesvideos/monfilm.rm" />
<embed width="358" height="258" src="mesvideos/monfilm.rm" type="audio/x-pn-realaudio-plugin" controls="ImageWindow" console="Clip1" autostart="true"></embed>
</object><br />
<object classid="CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA" width="358" height="30">
<param name="console" value="Clip1" />
<param name="controls" value="controlpanel" />
<param name="autotstart" value="true" />
<param name="src" value="mesvideos/monfilm.rm" />
<embed width="358" height="30" src="mesvideos/monfilm.rm" type="audio/x-pn-realaudio-plugin" controls="controlpanel" console="Clip1" autostart="true"></embed>
</object>

Explication: Pour intégrer une vidéo Real (format rm) dans une page, le code Html doit être composé de deux parties (deux balises OBJECT avec chacune une balise EMBED). Une partie pour afficher la vidéo (controls="ImageWindow") et une partie pour afficher les boutons de contrôle (controls="controlpanel").
Format vidéo Code HTML pour une vidéo au format Quicktime (Apple)
Vidéo visible avec le lecteur gratuit QuickTime

<object classid="CLSID:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="340" height="260" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="controller" value="true" />
<param name="autoplay" value="true" />
<param name="src" value="mesvideos/mavideo.mov" />
<embed width="340" height="260" src="mesvideos/mavideo.mov" type="video/quicktime" controller="true" autoplay="true"></embed>
</object>



< Page précédente TECHNIQUE VIDéO Page suivante >