HTML & CSS pour débutants (Partie 23): Multimédia pour le site web (2)

Les fichiers audio peuvent être intégrés dans HTML5 de manière similaire aux vidéos. HTML5 fournit à cet effet un élément spécifique avec audio.

<audio src="chanson.mp3">
   Votre navigateur ne supporte pas l'élément audio.
</audio>

Avec l'attribut src, on assigne au audio-élément le nom du fichier à jouer. Cependant, le fichier n'est pas encore lu. Pour cela, des contrôles sont nécessaires.

Pour afficher les contrôles, attribuez à l'élément audio l'attribut controls.

<audio src="chanson.mp3" controls>
   Votre navigateur ne supporte pas l'élément audio.
</audio>

Dans le navigateur, ça devrait ressembler à ceci :

Si controls est manquant, l'élément incorporé via audio n'apparaîtra pas. Il est judicieux de ne pas inclure cet attribut si l'on souhaite ajouter ses propres contrôles via JavaScript.

Malheureusement, l'utilisation de l'élément audio n'est pas sans problèmes. La faute en revient une fois de plus aux navigateurs, qui prennent en charge des formats différents. Le tableau suivant vous donnera un aperçu de la situation actuelle à ce sujet.

Que faire donc? L'élément audio vous permet également de définir des éléments source supplémentaires. On assigne ensuite à ces éléments les formats appropriés pour les différents navigateurs. Voici un exemple :

<audio controls>  
    <source src="chanson.mp3">  
    <source src="chanson.ogg">  
</audio>

Les attributs src reçoivent les fichiers respectifs qui se présentent ensuite dans les différents formats. Outre controls, l'élément audio dispose d'autres attributs. L'un d'eux est autoplay.

<audio controls autoplay>  
    <source src="chanson.mp3">  
    <source src="chanson.ogg">  
</audio>

Si l'attribut est activé, la lecture du fichier audio démarre automatiquement une fois qu'il est chargé. Normalement, on n'utilise pas cet attribut, car on devrait laisser aux visiteurs le choix du moment où un fichier audio est lu.

L'attribut loop est également intéressant. Cet attribut permet à la musique de se lire en boucle.

Comme pour l'intégration des vidéos, pour les fichiers audio, il existe aussi les attributs type et media. Vous pouvez donc spécifier ici les types MIME et les codecs correspondants. La spécification HTML5 liste les exemples suivants pour l'attribut type :

• type='audio/ogg; codecs=vorbis'

• type='audio/ogg; codecs=speex'

• type='audio/ogg; codecs=flac'

Notez que ces deux attributs ne peuvent être utilisés que dans l'élément source, et non dans l'élément audio.

Intégrer Flash & Co.

Les films Flash pouvaient être intégrés dans les anciennes versions HTML en combinant les éléments embed et object. La syntaxe résultante - d'ailleurs très peu attrayante - ressemblait par exemple à ceci :

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="800" height="600">
  <param name=movie value="intro.swf">
 <param name=quality value=high>
 <embed src="intro.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="600"> </embed>
 </object>

C'est la manière classique à travers les éléments object et embed, qui existait depuis longtemps dans HTML.





Cependant, "classique" ne signifie pas que cette variante était approuvée par le W3C dans le passé. En effet, dans HTML 4, l'élément object était favorisé, comme cela était correctement interprété par Internet Explorer. Ce n'était pas le cas du navigateur Netscape Navigator, qui préférait l'élément embed. Cette interprétation différente rendait nécessaire la combinaison d'éléments object et embed.

HTML5 offre désormais officiellement les deux éléments object et embed pour intégrer des contenus actifs.

embed est un conteneur conçu pour afficher du contenu non-HTML qui n'est pas couvert par d'autres éléments tels que img, video, audio, etc. Normalement, des plug-ins de navigateur sont nécessaires pour afficher le contenu intégré.

Avec embed, il est maintenant possible d'intégrer des vidéos Flash de manière standardisée. Voici un exemple de ce à quoi cela peut ressembler :

<embed
    src="http://www.youtube.com/v/v1PgiBpTtao?fs=1&hl=de_DE"
    type="application/x-shockwave-flash"
    width="384"
    height="313"
    allowscriptaccess="always"
    allowfullscreen="true"
  />

Différents attributs peuvent être assignés à l'élément embed. Le plus important est bien sûr l'attribut src. Car c'est par là qu'on indique finalement le fichier à intégrer. Le type MIME est spécifié par l'attribut type. Dans le cas du Flash, il s'agit de application/x-shockwave-flash. Si vous souhaitez intégrer un fichier LaTeX, vous noterez application/x-latex. La largeur et la hauteur du fichier intégré sont contrôlées par width et height.

Il existe d'autres attributs, qui ne font cependant pas officiellement partie de HTML5. Ils permettent cependant de contrôler le plug-in utilisé. Ainsi, dans l'exemple précédent, avec les attributs Flash "autoriser le script" et "plein écran" définis, il a été décidé qu'un accès au script et un mode plein écran sont possibles. Il y a également l'attribut quality, qui permet de déterminer la qualité du film Flash.

<embed 
    src="flash.swf" 
    width="600" height="300" 
    type="application/x-shockwave-flash" 
    quality="high" 
 />

L'élément object

L'élément object sert de conteneur pour les contenus, tout comme embed. Contrairement à embed, cependant, object connaît trois modèles de contenu différents. Si le navigateur reconnaît qu'il s'agit d'une image directement affichable, il se comporte comme s'il s'agissait d'un élément img. Si l'objet référencé est un contenu web, il sera affiché dans un iFrame. (Plus d'informations sur les iFrames à venir dans la suite de cette série). Pour d'autres contenus, object se comporte comme embed.

L'exemple suivant montre l'intégration d'une vidéo Flash via l'élément object.

<object
    type="application/x-shockwave-flash"
    data="http://www.youtube.com/v/BzYBY_9rnuA?version=3&hl=de_DE&rel=0"
    width="400"
    height="300">
    <param name="allowscriptaccess" value="always" />
    <param name="allowfullscreen" value="true" />
    <p>
       Votre navigateur ne dispose pas du plug-in Flash.
    </p>
 </object>

En conclusion, la question se pose bien sûr de savoir s'il faut utiliser object ou embed. À première vue, ces deux éléments semblent presque identiques. Et en effet, l'élément object peut tout faire comme l'élément embed.





Pour l'intégration de contenus - à l'exception des images - il est normalement recommandé d'utiliser l'élément object. Cet élément permet en effet de spécifier des contenus alternatifs qui seront affichés si l'élément intégré ne peut pas être chargé.