Ajouter un fichier multimédia dans une page web

Cet article dresse grossièrement différentes possibilités pour intégrer un document multimédia dans une page web. Il ne s'agit donc pas de spécifier le chemin vers un document audio ou vidéo via un lien hypertexte, mais de visualiser ce type de fichier directement sur une page web. Exemple de lien: renommer un fichier dans Windows.

La lecture d'un document multimédia par le navigateur n'est pas si simple. Il doit disposer des plug-in (greffon en français) adaptés: Macromedia Flash, Macromedia Shockwave, QuickTime, RealPlayer, Windows Media Player... À défaut des greffons, le visiteur ne verra rien apparaître si ce n'est un texte alternatif s'il a été prévu et peut-être un lien vers le téléchargement du plug-in adapté.

Insertion d'une animation Flash

Vous remarquez que l'attribut data spécifie le nom du fichier avec son extension. Lorsque data est précisé, il est recommandé d'indiquer le type pour définir le type MIME du document. L'attribut standby indique le texte à afficher lors du chargement de l'animation.

Par défaut, l'animation Flash se lance automatiquement et tourne en boucle. Pour annuler ces deux propriétés: <param name="play" value="false" /> et <param name="loop" value=false" />.

Pour ceux qui se demandent si ça marche vraiment, voici 3 possibilités pour intégrer une animation flash dans une page web. Ouvrez les liens dans différents navigateurs pour voir le résultat.

L'exemple 4 illustre une autre méthode qui consiste à employer un contrôle ActiveX dont le code d'identification est indiqué dans l'attribut classid. L'attribut codebase est facultatif et indique au navigateur l'adresse du plug-in à télécharger si nécessaire. Le résultat est moins satisfaisant dans Internet Explorer lorsque la balise <object> est employée seule.

Quelle méthode choisir ? La balise <embed> est un élément spécifique à l'intégration d'éléments multimédias: animation, son, vidéo. Elle n'est pas toujours reconnue par tous les navigateurs. C'est d'ailleurs une balise obsolète en XHTML.

La balise <oject> est tout à fait adaptée et valide mais donne parfois des mauvais résultats d'affichage surtout dans Internet Explorer. Pour garantir un résultat satisfaisant, et en attendant qu'Internet Explorer gère correctement cette balise, il est plus prudent d'utiliser le couple <object> et <embed> (voir exemple 3).

Insertion d'un fichier audio

Pour la lecture d'un fichier son, le navigateur fait appel au lecteur multimédia configuré par défaut: Windows Media Player, iTunes, RealMedia, WinAmp.... Pour ajouter un fichier audio, nous utilisons la balise <object>. Malheureusement, cette méthode pose problème sur Firefox ainsi que les autres méthodes. Il vaut donc mieux intégrer son fichier son dans une animation flash.

Pour insérer une musique en arrière-plan, il suffit de supprimer le controller et d'indiquer à la chanson de tourner en boucle. Inutile de spécifier le lancement du fichier au chargement de la page puisqu'il se fait automatiquement par défaut. Exemple d'une musique d'ambiance. [Et la balise bgsound dans le head ?? fonctionne que sur IE mais est-elle valide XHTML strict ? Le son peut mettre un temps à se lancer si le fichier est lourd à charger. ]

Quels sont les formats audio utilisables sur le web ? Le format WAV natif de Windows est reconnu par tous les navigateurs. Il est cependant très gourmand en taille et on lui préfère le format compressé MP3. L'extension .mid ou .midi concerne les fichiers de type MIDI. Le son est comparable aux musiques polyphoniques présentes sur les GSM. Pour en savoir plus sur les différents formats audio, je vous renvoie sur Wikipédia.

Insertion d'une vidéo

Tout comme le son, le navigateur n'est pas capable de lire la vidéo nativement. Il fait donc appel à un lecteur. Les plus utilisés sont: RealPlayer, QuickTime, et Windows Media Player. Ci-dessous, un exemple des boutons de contrôle pour chaque lecteur vidéo.

Le problème de l'insertion d'une vidéo dans une page web est identique à celui évoqué précédemment avec l'ajout d'une animation Flash. Pour s'assurer qu'elle sera affichée sur tous les systèmes, il faut encapsuler la méthode <embed> dans <object>.

1. <embed> avec Windows Media Player

Windows Media Player reconnaît plusieurs formats: .wmv, .wma, .avi, .mpg, .mp3 et .mp4. Il est disponible nativement sur les systèmes d'exploitation Windows, ce qui veut dire qu'il se lance automatiquement dès qu'il rencontre les formats cités ci-dessus... faut-il encore avoir la bonne version avec les bons codecs.

2. <embed> avec RealPlayer

Real Media Player reconnaît plusieurs formats: .ram, .rm, .smi, .mp4, et .mpg. Il se lance généralement à la place de Windows Player avec des navigateurs alternatifs comme Firefox.

3. <embed> avec QuickTime

QuickTime appartient à Apple et fonctionne aussi bien sur Mac que sur PC. Il reconnaît les formats .qtl, .mov, .mpg, .mp4 et .mp3.

Couple <object> et <embed>

Pour le moment, aucune des deux solutions n'est satisfaisante si on veut produire un document conforme et visible par le plus grand nombre de personnes. Alors, comment faire ? Une solution souvent utilisée est d'encapsuler l'élément <embed> dans la balise <object>.

Insertion d'une vidéo hébergée par un tiers

L'année 2006 sera l'année de la vidéo sur le web. Des plateformes d'hébergement et de partage de fichiers vidéo naissent chaque semaine. Les plus connus sont YouTube, OurMedia et Dailymotion (français). Ces systèmes permettent rapidement d'insérer une vidéo sur votre page web sans souffrir de la place qu'elle occupe sur votre espace de stockage ni de la bande passante occupée lors de chaque lecture. C'est pratique et gratuit.

Questions / Réponses

N'existe-t-il pas un moyen fiable pour ajouter un son ?

L'arrivée du podcasting engendre une montée en flèche des fichiers sonores. Malheureusement, la solution précédente n'est pas idéale car le résultat affiché à l'écran dépendra des logiciels installés par le visiteur. Le mieux est d'encapsuler ce fichier dans une animation Flash et fournir des boutons de contrôle: play, pause, stop, etc.

Cet exercice dans Flash n'est pas chose aisée quand on y connaît rien. C'est pour cette raison, que des webmasters généreux distribuent gratuitement leur lecteur audio. Les plus connus sont le Dew Player (à gauche) et le Neolao (à droite).

Le principe est assez simple, vous téléchargez le player audio en Flash (léger et gratuit). Vous copiez-collez le code HTML dans votre code source en modifiant le chemin du fichier. Vous envoyez sur le serveur le player, votre fichier son ainsi que votre page contenant la bande audio.

Il existe aussi de nombreux autres lecteurs en Flash pour la vidéo. Ils sont payants (aux alentours de 30 €) ou gratuits comme le FLV Player de Neolao. Toute la procédure d'installation est indiquée sur son site.

Comment connaître les hauteur et largeur d'une vidéo ?

Lorsqu'on encode sa vidéo à la main, pas facile de connaître les dimensions de sa vidéo. La première solution c'est d'aller rechercher votre document via une fenêtre Windows, clic droit sur le document et Propriétés. Dans l'onglet Résumé vous avez les informations nécessaires.

L'autre méthode est d'utiliser un logiciel vidéo comme Adobe Première ou plus simplement un logiciel d'image comme ACDSee qui affiche les données. Tout dépend de la méthode d'enregistrement de la vidéo.

Qu'est-ce que le MIME ?

Le MIME, présent dans l'attribut type, se compose d'une catégorie suivi d'un format séparé par une barre oblique. Dans le tableau ci-dessous, j'ai repris des types MIME régulièrement utilisés. La liste complète se trouve sur Mozdev.

Liste des MIME populaires
Extensions	Type MIME	Plug-in
.pdf	application/pdf	Acrobat Reader
.ogg	application/x-ogg	VLC Media Player
.swf	application/x-shockwave-flash	Macromedia Flash Player
.xml	application/xhtml+xml	Géré nativement
.aac	audio/aac	QuickTime
.mid / .midi	audio/midi	QuickTime
.mp3	audio/mp3	QuickTime
.wav	audio/wav	QuickTime
.gif	image/gif	Géré nativement
.jpg / .jpeg	image/jpg	Géré nativement
.png	image/png	Géré nativement
.tif / .tiff	image/tif	QuickTime
.ico / .cur	image/x-icon	Géré nativement
.css	text/css	Géré nativement
.htm / .html	text/html	Géré nativement
.js	text/javascript	Géré nativement
.avi	video/avi	QuickTime
.mp4	video/mp4	QuickTime
.mpg / .mpeg	video/mpeg	VLC Media Player
.mov	video/quicktime	QuickTime
.doc	application/msword	Microsoft Word
.txt	text/plain	Géré nativement

Comment connaître l'attribut classid et codebase ?

De nouveau, si vous ajoutez le code HTML manuellement il est difficile de se souvenir du contenu des attributs classid et codebase pour l'élément <object>. Chaque site de chaque éditeur (WM, Real, QT) fournit le code ‘object’ complet pour sa technologie, avec le bon code activeX qui correspond à la bonne version du player.

Flash

classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,40,0"

Windows Media Player 10

classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"
codebase="http://activex.microsoft.com/activex/controls/
mplayer/en/nsmp2inf.cab#Version=6,4,5,715"

QuickTime

classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"

Real Player

classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
codebase="..."

Réalisé le 3 mai 2006.