Les formats audio et vidéo

1) Les formats audios
Extensions
.aiff ou .aif
.mid ou .midi
.mp4 ou .mp3 ou .mpa
.rpm ou .ra ou.rm
wav ou .wave
Origines
Format son du Macintosh
Musical Instrument Digital Interface
MPEG Layer 3-2-1
Format RealAudio (ou RealVideo)
Format son de Windows
Logiciel de lecture
Windows Media Player
Windows Media Player
Winamp -Sonique
RealPlayer
Windows Media Player
Intégration d’un son MIDI ou WAV
La balise bgsound
Cette balise permet d’intégrer un arrière plan sonore. (spécifique à Internet Explorer)
Exemple: <bgsound src=”song.mid” loop=”1” >
La balise a
Cette balise permet d’insérer un son dans une page en appelant ce son par un lien hypertexte.
Exemple: <a href=”song.mid">Cliquer ici </a>
La balise embed
Cette balise permet d’inclure n’importe quel son. Elle fait appel, dans certains cas, à un
module externe (plugin). Cette balise est non compatible avec certains navigateurs. On peut
utiliser les balises <noembed> et </noembed> ignorées par les navigateurs qui comprennent
la balise <embed> pour fournir un texte ou une image de remplacement et même la balise
<bgsound> .
Exemple: <embed src=”song.mid" width= « 145 » height= « 45» autostart= “false“>
Cette balise possède plusieurs attributs:
 align : aligne la console ou le texte (quatre 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).
 pluginspace : URL de la page Web contenant les informations sur le plug-in.
 src : URL complète (chemin) du fichier.
 autostart : spécifie si l’objet multimédia est joué automatiquement (true) ou non
(false), par défaut : true.
 autoload : spécifie si le chargement de
l’objet multimédia s’effectue
automatiquement (true) ou non (false), par défaut : true.
 loop : spécifie le nombre de fois où le fichier sera joué (si la valeur est -1 le fichier
sera joué indéfiniment).
 type : indique le type MINE ex : type= « audio/mod» (facultatif).
 console : affiche toute la console (choix par défaut).
 smallconsole : affiche une console réduite.
 playbutton : affiche seulement le bouton lecture.
 stopbutton : affiche seulement le bouton stop.
HTML – Les Formats – Jean Michel MEULIEN
Page 1



pausebutton : affiche seulement le bouton pause.
volumelever : affiche seulement le bouton volume.
hidden : cache le panneau de contrôle.
Intégration du son au format .MP3
L’intégration d’un fichier.MP3 est identique à l’intégration d’un fichier Midi ou WAV.
Attention tout de même à la taille de votre fichier (il ne doit pas être supérieur à 40-60 Ko,
sinon le proposer en téléchargement). Pour encoder un fichier au format MP3, il faut un
« encoder ». Vous pourrez en trouver à l’adresse suivante : http://www.mp3.com
Intégration du son au format REALAUDIO
L’intégration d’un fichier REALAUDIO est similaire à l’intégration d’un fichier Midi ou
WAV. Par contre, l’attribut <embed> possède certains attributs particuliers, notamment
l’attribut 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 : n’intègre que la fenêtre d’information.
 statusbar : intègre une barre d’état
 playbutton : intègre les boutons play et pause.
 stopbutton : n’intègre que le bouton stop.
Exemple: <embed src=”fichier.ra" controls=”controlpanel" width= « 200 »
height= « 35» autostart= “false“>
2) Les formats vidéos
Extensions
.asf ou .asx
.avi ou wmv
.fli
.mov
.mpeg ou .mpe ou .mpg
.rpm ou .ra ou.rm
.swf
Origines
Logiciel de lecture
Format Netshow (Microsoft)
Windows Media Player
Vidéo for Windows
Windows Media Player
Animation
Winamp -Sonique
Fichier Quicktime (Apple –Mac)
Quicktime
Motion Picture Experts (MPEG-1) Windows Media Player
Format RealVideo(ou RealAudio)
RealPlayer
Format Flash (Macromedia)
Plug-in Flash-Shockwave
Intégration d’une vidéo au format AVI ou WMV
La balise a
Cette balise permet d’insérer une vidéo dans une page en appelant cette vidéo par un lien
hypertexte.
Exemple: <a href=”video.avi">Cliquer ici </a>
La balise embed
Cette balise permet d’inclure n’importe quelle vidéo et fait appel dans certains cas à un
module externe (plug-in). Cette balise est non compatible avec certains navigateurs. On peut
utiliser les balises <noembed> et </noembed> ignorées par les navigateurs qui comprennent
la balise <embed> pour fournir un texte ou une image de remplacement.
HTML – Les Formats – Jean Michel MEULIEN
Page 2
Exemple: <embed src=”video.avi" width= « 200 » height= « 200» autostart= “false“
loop=”1”>
Cette balise possède plusieurs attributs:
 align : aligne la console ou le texte (quatre 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), par
défaut : true.
 autoload : spécifie si le chargement de la vidéo s’effectue automatiquement (true) ou
non (false), par défaut : true.
 loop : spécifie le nombre de fois où la vidéo serait jouée (si la valeur est-1 la vidéo
était jouée indéfiniment).
 controls : indique si le panneau de contrôle s’affiche (true) ou non (false), par défaut :
true.
 type : indique le type MINE ex : type= « audio/mod» (facultatif).
Intégration d’une vidéo au format REALVIDEO
Le format RealVideo a été développé par la société RealNetwork.
L’intégration d’un fichier avec REALVIDEO peut se faire : 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 : n’intègre que la fenêtre d’information.
 statusbar : intègre une barre d’état
 playbutton : intègre les boutons play et pause.
 stopbutton : n’intègre que le bouton stop.
Exemple: <embed src=”video.ra" controls=”infopanel" width= « 200 »
height= « 35» autostart= “false“>
Intégration d’une vidéo au format 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), par défaut :
true.
 controller : affiche la barre d’outils (true) ou non (false) par défaut : true. Si elle est
affichée, penser à 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).
HTML – Les Formats – Jean Michel MEULIEN
Page 3



target : identique pour un lien vers un frame.
href : lien avec la vidéo.
pan, tilt, fov, nod, et correction : utilisés uniquement pour la diffusion du film VR
(panoramique)
Exemple: <embed src=”video.mov" width= « 200 » height= « 200» controller= “false“>
Intégration d’une vidéo au format MPEG
Ce format représente la norme de l’industrie pour la vidéo. Elle a été développée pour
permettre la diffusion de vidéos compressées de qualité.
L’intégration est similaire à l’intégration de fichiers vidéos avi,mov ou wmv. 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.
Exemple: <embed src=”video.mpeg" width= « 300 » height= « 300» autostart= “true“>
Intégration d’un fichier au format SWF (Flash)
Qu’est ce que Flash ?
Il s’agit d’un logiciel qui permet de réaliser des animations de différents types : gif animé,
dessins animés, présentations de type « slide show » comparables à celles de Microsoft
Powerpoint. Dans ces exemples, vous pouvez constater que ces types d’animations ne sont
pas ou peu interactifs. Flash possède un langage de programmation appelé ActionScript,
celui-ci permet de développer des animations interactives. Ce degré d’interactivité varie selon
le niveau de difficulté des scripts placés dans une animation. Ainsi, vous pouvez réaliser de
simples « slides show » avec quelques effets de rollover et un système de navigation plus ou
moins linéaire mais vous pouvez également développer des applications plus complexes.
Extension des fichiers
Lorsque vous enregistrerez vos animations (fichiers), vous obtiendrez le format de fichier
.fla. Lorsque vous publierez celles-ci, le format sera alors un .swf.
Caractéristiques et avantages
Les graphiques crées sous Flash sont de type vectoriel, d’où certains avantages :
 des animations compactes en poids, optimisées pour le Web.
 des dessins très facilement modifiables.
 une compatibilité accrue avec de nombreux logiciels tels que Adobe, Corel Draw,
Fireworks, Freehand Streaming.
 une résolution optimale pour un écran ou une imprimante.
 une protection absolue de ces œuvres (impossible de décortiquer l’animation)
- Formats de fichiers pris en compte.
 bitmaps (photographies numérisées, fichiers BMP), Flash conserve les paramètres
de transparence des bitmaps importés.
-Séquences d’images (gif animés, PICT).
-Images vectorielles (Fireworks, FreeHand, Adobe).
Flash permet également d’importer des fichiers sons (MP3,AIF,WAV).
Insertion d’un fichier Flash
L’insertion d’un fichier au format swf se fait à l’aide de la balise <object>
HTML – Les Formats – Jean Michel MEULIEN
Page 4
<object classid= « clsid:D27CDB6E-AE6D-11cf-96B8-444553540000»
codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#3,0
,0,0” width=”350” height=”140” >
<param name=”src” value=”nom_de_l_animation.swf” >
<param name=”quality” value=”high” >
<param name=”bgcolor” value=”#CCCC00” >
<embed src =”nom_de_l_animation.swf” pluginspage=
“http://www.macromedia.com/ shockwave/download/ » type= « application/xshockwave-flash » width=”350” height=”140” quality=”high” bgcolor=”#CCCC00” >
</embed>
</object>
L’animation Flash peut avoir une extension .exe quand il s’agit d’une animation trop lourde
pour être insérée en swf. C’est le cas des jeux en Flash par exemple. Pour l’intégrer, il faut en
proposer le téléchargement à l’internaute avec la balise <a>.
<a href= « smoke.exe» > cliquer ici pour télécharger l’animation </a>
L’internaute aura alors le choix, soit de l’ouvrir dans la fenêtre de son navigateur, soit de le
télécharger sur son disque dur.
Le streaming
Le streaming vient du mot anglais « stream » qui signifie « flux ». Il s’agit d’un mode de
diffusion en continu, permettant de traiter les données avant qu’elles ne soient entièrement
téléchargées. Autrement dit, il n’est plus nécessaire de télécharger la vidéo sur son disque
dur pour pouvoir la regarder. Pendant que l’on suit le début du programme, l’ordinateur
continue à le télécharger pour restituer la suite en toute fluidité. Cette technique est possible
grâce à une mémoire tampon (buffer) générée par le lecteur multimédia. Sur une page Web,
lorsqu’on active le lien d’une vidéo, le serveur à l’autre bout de la connexion va
déclencher le démarrage de la vidéo, localisée sur un serveur dédié à ce type de fichier.
HTML – Les Formats – Jean Michel MEULIEN
Page 5