|  |  | |
|
|
|
|
|
 Focus - 20 Août 2008
Devenez "membre" de ALL HTML et faites partie d'une vraie communauté de passionnés et/ou de professionnels du développement sur Internet.
L'accès membre est gratuit et vous permet d'accéder à des fonctionnalités complémentaires :
- accéder à l'annuaire des 44 000 membres,
- poster des messages dans les forums,
- utiliser la messagerie interne,
- bénéficier d'offres négociées...).
Alors n'attendez-plus!
 Inscrivez-vous dès à présent !
|
|
|
|
|
|
| HTML |     | | Multimédia - Vidéo
 1. 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.
| Extension | Origines - Observations | Logiciel | | .asf ou .asx | Format Netshow (Microsoft) | W.Media.Player | | .avi | Vidéo for Windows | W.Media.Player | | .fli | Animation | W.Media.Player | | .mov | Fichier Quicktime (Apple - Mac) | Quicktime | | .mpeg ou .mpe ou .mpg | Motion Picture Experts (MPEG-1) | W.Media.Player | | .rpm ou .ra ou .rm | Format RealVideo (ou RealAudio) | RealPlayer | .swf
| Format Flash (Macromedia) | Plug-in Flash -Shockwave |
2. 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>
3. 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">
4. 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">
5. 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.
6. 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.
| Netscape 2 | I.Explorer 2 | Netscape 3 4.x | I.Explorer 3 4.x 5 | | <bgsound> | Non | Oui | Non | Oui | | <img dynsrc> | Non | Non | Non | Oui | | <embed> | Non | Non | Oui | Oui | | <noembed> | Balise non ignorée | Balise non ignorée | Balise ignorée | Balise ignorée | | <object> | Non | Non | Oui (v4) | Oui (v4 et v5) |
|
|
| |
Recommander ALL HTML
Si vous appréciez ce site,
n'hésitez pas à le faire
découvrir à vos ami(e)s...
| | Cliquez ici |
|
|
| | |
ACCUEIL
