all html : Le portail des webmaster

Article publié le mardi 16 mars 2004 par ALL HTML.
Cet article est classé dans les catégories « HTML »

Les différents formats vidéo

Voici un tableau récapitulant les différents formats, leurs origines ainsi que les logiciels permettant de les lire.

<br><br><table border="1" bordercolor="#330033" cellpadding="3" cellspacing="1" width="489"><tbody><tr><td align="center" bgcolor="#6699cc"><span class="texte"><b>Extension</b></span></td> <td align="center" bgcolor="#6699cc"><span class="texte"><b>Origines - Observations</b></span></td> <td align="center" bgcolor="#6699cc"><span class="texte"><b>Logiciel</b></span></td></tr> <tr><td><span class="texte"><b>.asf ou .asx</b></span></td> <td><span class="texte">Format Netshow (Microsoft) </span></td><td><span class="texte">W.Media.Player </span></td></tr><tr><td><span class="texte"><b> .avi</b> </span></td><td><span class="texte">Vidéo for Windows </span></td><td><span class="texte">W.Media.Player </span></td></tr><tr><td><span class="texte"><b> .fli</b> </span></td><td><span class="texte">Animation </span></td><td><span class="texte">W.Media.Player </span></td></tr><tr><td><span class="texte"><b> .mov</b> </span></td><td><span class="texte">Fichier Quicktime (Apple - Mac) </span></td><td><span class="texte">Quicktime </span></td></tr><tr><td><span class="texte"><b> .mpeg ou .mpe ou .mpg</b> </span></td><td><span class="texte">Motion Picture Experts (MPEG-1) </span></td><td><span class="texte">W.Media.Player </span></td></tr><tr><td><span class="texte"><b> .rpm ou .ra ou .rm</b> </span></td><td><span class="texte">Format RealVideo (ou RealAudio) </span></td><td><span class="texte">RealPlayer </span></td></tr><tr><td><span class="texte"><b> .swf<br></b></span></td><td><span class="texte">Format Flash (Macromedia) </span></td><td><span class="texte">Plug-in Flash -Shockwave </span></td></tr></tbody></table>

Intégrer une vidéo AVI

L'intégration d'un fichier AVI peut s'effectuer de différentes façons :

- Soit avec la balise <a>
- Soit avec la balise <embed>

a) La balise <a>

Le plus simple pour insérer une vidéo dans une page est d'appeler cette vidéo par un lien hypertexte :

Exemple : <a href="divers/video.avi">Cliquez-ici</a>

b) La balise <embed>

Cette balise permet d'inclure n'importe quelle vidéo et fait appel, dans certains cas, à un module externe (plugin). Attention : elle n'est pas compatible avec certains navigateurs (I.Explorer 3.0 par exemple), c'est pour cela que vous pouvez utiliser les balises <noembed> et </noembed> (ignorés par les navigateurs qui comprennent la balise <embed>) pour fournir un texte ou une image de remplacement.

Voici les attributs standards de la balise <embed> :

- align : aligne la console ou le texte (4 valeurs possibles, right, left, top, bottom)
- border : Largeur de la bordure du cadre (en pixels)
- width : Largeur de la fenêtre qui accueillera la console (en pixels)
- height : Hauteur de la fenêtre qui accueillera la console (en pixels)
- src : URL complète (chemin) du fichier
- autostart : Spécifie si la vidéo est jouée automatiquement (true) ou non (false) (défaut : true)
- autoload : Spécifie si le chargement de la vidéo s'effectue automatiquement (true) ou non (false) (défaut : true)
- loop : Spécifie le nombre de fois où la vidéo est jouée (si la valeur est ?1 le fichier sera joué indéfiniment)
- controls : Indique si le panneau de contrôle s'affiche (true) ou non (false) (défaut : true)
- type : Indique le type MIME ex: type="audio/mod" (facultatif)

Exemple : <embed src="divers/video.avi" width=200 height=200 autostart="false" loop=1>

Intégrer une vidéo Quicktime

Le module Quicktime (Apple) permet d'afficher des vidéos de type .MOV (mais aussi les formats AVI, MIDI, WAV ... avec Quicktime 3.0). L'intégration de vidéo Quicktime est identique au format AVI. Cependant, la balise <embed> possède plusieurs attributs particuliers :
- type : indique si la vidéo est jouée automatiquement (true) ou non (false) (défaut : true)
- controller : Affiche la barre d'outils (true) ou non (false) (défaut : true). Si elle est affichée, pensez à augmenter la valeur height de 24 pixels
- loop : Indique si la vidéo diffusée se fait en boucle
- playereveryframe : Indique si la vidéo s'exécute au fur et à mesure du téléchargement (true) ou non (false). Equivalent au streaming mais l'image sera saccadée)
- target : Identique pour un lien vers une frame
- href : Lien avec la vidéo
- pan, tilt, fov, nod, et correction : Utilisés uniquement pour la diffusion de film VR (panoramique)

Note : Ce n'est pas parce que vous avez Quicktime installé sur votre machine qu'il se lancera automatiquement. Il faut d'abord le définir dans le type MIME de Windows. Sinon, c'est le contrôle ActiveMovie (ou le lecteur de Media d'Internet Explorer) qui s'exécutera, ce qui, à part l'interface, donnera le même résultat.

Exemple : <embed src="divers/video.mov" width=200 height=200 controller="false">

Intégrer une vidéo RealVideo

L'intégration de Vidéo avec RealVideo est similaire à l'intégration de fichier audio avec RealAudio. Elle se fait donc : soit avec un lien hypertexte, soit avec la balise <embed> qui possède des attributs identiques à l'insertion d'une vidéo AVI, sauf controls qui possède des valeurs spécifiques :
- all : La fenêtre de contrôle est complète
- controlpanel : Intègre les boutons play ,pause et stop ainsi que le curseur de position
- infovolumepanel : Intègre une fenêtre d'information ainsi que le curseur de volume
- infopanel : Intègre seulement la fenêtre d'information
- statusbar : Intègre une barre d'état
- playbutton : Intègre les boutons play et pause
- stopbutton : Intègre seulement le bouton stop.

Note : L'attribut console=nom permet, si vous avez plusieurs fichiers sur une même page, de les relier par le même nom et donc d'obtenir les mêmes attributs pour controls.

Exemple : <embed src="divers/video.ra" controls="infopanel" width=200 height=35 autostart="false">

Principe du streaming

Le principe du streaming est simple. Il s'agit d'une méthode qui permet d'obtenir un téléchargement fluide : Le fichier vidéo (ou sonore) se chargera petit à petit, ce qui sera transparent et ainsi, non pénalisant pour le visiteur.

Intégrer une vidéo avec RealPlayer (même principe pour un fichier audio), en faisant appel au streaming, se passe en trois étapes :

- Créer le fichier au format RealVideo
- Création du Metafile
- Intégrer le fichier final dans votre page

a) Créer le fichier au format RealVideo

Pour créer un fichier RealVideo, vous devez passer par l'utilitaire Real Encoder 5 (audio et vidéo) disponible gratuitement sur le site Web de Real.com.
Cet utilitaire permet de transformer un fichier .avi (ou tout autre fichier vidéo) en .ra, son utilisation est très simple.

b) Création du Metafile

Le Metafile est juste un fichier ayant l'extension .ram et contenant une ligne qui appellera votre fichier RealVideo. Exemple : si votre fichier s'appelle video.ra, qu'il a été transféré par FTP dans un répertoire se nommant film et que l'adresse de votre site est www.tv.com :

http://www.tv.com/film/video.ra />
La création de ce fichier, que l'on nommera meta.ram, se fait tout simplement avec un éditeur de texte (le bloc-note par exemple). Attention tout de même aux majuscules et minuscules.

c) Intégrer le fichier final dans votre page*

Pour relier votre page à ce Metafile, il suffit de créer un lien hypertexte qui appellera celui-ci et lancera RealPlayer. Exemple si vous avez transféré votre Metafile sur la racine de votre site

<a href="meta.ram">Du streaming avec RealVideo</a>

Note : Il est possible d'opter pour la balise <embed> à la place du lien.

Compatibilité des navigateurs avec les balises multimédia

Voici un tableau récapitulif des différentes balises pouvant accepter des fichiers multimédia ainsi que les navigateurs compatibles avec celles-ci. Comme vous pouvez le voir, il n'est pas de tout repos de proposer du multimédia pour tous les visiteurs.

<br><br><table border="1" bordercolor="#330033" cellpadding="3" cellspacing="1" width="489"><tbody><tr><td></td><td align="center" bgcolor="#6699cc"><span class="texte"><b>Netscape 2</b></span></td><td align="center" bgcolor="#6699cc"><span class="texte"><b>I.Explorer 2</b></span></td><td align="center" bgcolor="#6699cc"><span class="texte"><b>Netscape 3 4.x</b></span></td><td align="center" bgcolor="#6699cc"><span class="texte"><b>I.Explorer 3 4.x 5</b></span></td></tr><tr><td><span class="texte"><b>&lt;bgsound&gt;</b></span></td><td><span class="texte">Non</span></td><td><span class="texte">Oui</span></td><td><span class="texte">Non</span></td><td><span class="texte">Oui</span></td></tr><tr><td><span class="texte"><b>&lt;img dynsrc&gt;</b></span></td><td><span class="texte">Non </span></td><td><span class="texte">Non </span></td><td><span class="texte">Non</span></td><td><span class="texte">Oui</span></td></tr><tr><td><span class="texte"><b>&lt;embed&gt; </b></span></td><td><span class="texte">Non</span></td><td><span class="texte">Non</span></td><td><span class="texte">Oui</span></td><td><span class="texte">Oui</span></td></tr><tr><td><span class="texte"><b>&lt;noembed&gt;</b></span></td><td><span class="texte">Balise non ignorée</span></td><td><span class="texte">Balise non ignorée</span></td><td><span class="texte">Balise ignorée</span></td><td><span class="texte">Balise ignorée</span></td></tr><tr><td><span class="texte"><b>&lt;object&gt;</b></span></td><td><span class="texte">Non</span></td><td><span class="texte">Non</span></td><td><span class="texte">Oui (v4)</span></td><td><span class="texte">Oui (v4 et v5)</span></td></tr></tbody></table></span></td>

</tr>
</tbody></table>
</td>
</tr>
</tbody></table>