multimédia HTML5
Il semble de plus en plus évident que le format Theora/Vorbis soit systématiquement intégré à tous les navigateurs en raison de sa gratuité. Il en serait de même pour le format
WebM qui bien que gratuit a été initié par Google, d'où l'opposition ou la réticence d'Apple qui refuse actuellement d'intégrer ce codec à son navigateur !
Histoire à suivre...
| nom de balise | description |
|---|---|
| source | ressource multimédia |
| audio | contenu audible |
| video | contenu vidéo |
| embed | contenu externe |
<source type="audio/ogg" src="song.ogg"/>Avant de recourir à l'utilisation de balises génériques il est bon de s'assurer qu'une balise dont la sémantique correspond à notre besoin n'existe pas déjà. HTML 5 apporte une multitude de sections prédéfinies qu'il est bon de parcourir affin d'éviter cette erreur !
Bien que cela soit possible, il faut absolument éviter de lancer automatiquement la lecture d'un flux audio (attributs autoplay). Si ceci flatte l'égocentrisme du concepteur du site, il faut garder à l'esprit que c'est insupportable dans un environnent de travail, et que dans le futur les moteurs de recherche risquent de défavoriser les pages ayant ce comportement.
<audio autoplay="autoplay"
loop="loop" controls="controls">
<source src="song.ogg" type="audio/ogg"/>
<p><a href="song.ogg">Télécharger le fichier au
format Vorbis</a></p>
</audio>À noter la mise en place d'une solution alternative en cas d'ignorance de la balise audio.
Même remarque que sur la vidéo à propos du son : Il faut absolument éviter de lancer automatiquement la lecture d'un flux vidéo si celui-ci émet des sons..
<video width="640" height="480" preload="preload"
loop="loop" controls="controls" poster="image.png">
<source src="video.h264" type="video/h264"/>
<source src="BigBuckBunny.ogv" type="video/ogg"/>
<object type="application/x-shockwave-flash"
data="test.swf" width="320" height="240">
<param name="movie" value="data/test.swf" />
<param name="loop" value="false" />
<p>Échec : <a href="video.h264">video.h264</a></p>
</object>
</video>Comme l'illustre cet exemple il est possible de faire en sorte de proposer plusieurs vidéos, la vidéo sera choisie en fonction de l'ordre de présentation et du codec utilisé. Dans le cas où la balise video n'est pas reconnue ce sera la balise object qui prendra le relais, elle-même, si non supportée, peut être relayée par son contenu (ici du texte et un lien).
<embed width="640" height="480"
src="mon_animation.swf"/>
Transposons ce combat à ce que fut celui des formats d'images durant les années 90 : il y avait le jpeg (format libre) et le gif (développé par compuserve). Une controverse fut soulevée sur le gif par Unisys qui en tant que détenteur des brevets de ce format réclama en 1994 des pour son utilisation. Le PNG venait d'être lancé. Comme toujours dans le cas de développements ouverts, le temps de réflexion est long mais le résultat est à la hauteur des attentes, aussi PNG est bien supérieur à gif (transparence progressive, compression) et est libre de droits !
De l'animation avec PNG c'est possible : soit vous connaissez DOM et javascript et, tout en restant 100% dans la norme, vous pouvez réaliser une animation de qualité, soit vous avez recours au format MNG avec un M comme .