Les formats audio et vidéo
Transcription
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