Ressources

HTML5 pour les journalistes

26-03-2012

Logo HTML5De plus en plus utilisé par les développeurs et de mieux en mieux interprété par les navigateurs, le HTML5 comporte de nouvelles fonctionnalités destinées à vous simplifier le code tout en dynamisant vos pages.
Comment intégrer des sons et des vidéos sur votre site en utilisant ces nouvelles spécifications ? Mode d’emploi des éléments (balises) <audio> et <video>.

Le HTML 5 est une spécification développée par le W3C et la communauté WHATWG. Il s’agit d’une évolution du HTML4, développé dans les années 90 et qui permettait de construire des sites statiques. « Ce n’est pas la première fois que le format HTML est mis à jour. Ce langage évolue depuis sa naissance« , explique Jeremy Keith, auteur d’un ouvrage sur le HTML5 appliqué au web design (HTML5 pour les web designers, éd. Eyrolles).

Un des avantages du HTML5 est de rendre les pages interopérables quel que soit le navigateur utilisé. Toujours en phase de développement, son affichage sur les navigateurs récents ne pose, en principe, pas problème. Sur les versions antérieures à Internet Explorer 9 (IE9), par contre, les nouvelles balises du HTML5 ne s’afficheront qu’à la condition d’avoir correctement adapté son code.

Parmi les nouveautés du HTML5, on notera la suppression d’éléments et attributs utilisés pour la mise en forme de textes et l’apparition de nouvelles balises relatives à la structure de la page (<header>, <nav>, <article> et <footer>) mais qui intéresseront davantage les web designers. Il en va de même de la balise <canvas> qui, avec l’utilisation de JavaScript, offre de nombreuses possibilités d’animations fluides susceptibles de remplacer le flash (et le format .flv, pas toujours compatible avec les tablettes et smart phones). La simplification constitue l’un des gros avantges du HTML5, et les journalistes apprécieront les nouvelles balises <audio> et <video> qui permettent non seulement d’intégrer du son et des vidéos sur une page web beaucoup plus simplement qu’avec la balise <object> mais aussi d’abandonner progressivement le flash.

Intégrer du son sur votre site, mode d’emploi

Avant le HTML5, pour lire un fichier sonore sur son site, il fallait utiliser un lecteur (player) de format .mp3 en flash, comme par exemple le lecteur Dewplayer. Et ce lecteur, il fallait le transférer sur votre serveur web (en pratique, à l’aide un logiciel de transfert FTP). Le code donnait ceci :

<object type="application/x-shockwave-flash" data="dewplayer.swf" width="200" height=”20” id="dewplayer" name="dewplayer">
 <param name="movie" value="dewplayer.swf" />
 <param name="flashvars" value="mp3= monson.mp3" />
 <param name="wmode" value="transparent" />
 </object>

Avec le HTML5, on utilisera la balise <audio> :

<audio src="monson.mp3"> </audio>

Les principaux attributs de cette balise sont autoplay (lecture automatique), loop (lecture en boucle), controls (pour afficher le panneau de contrôle, qui sera celui de votre navigateur – donc plus de lecteur à installer sur votre serveur). Exemple :

<audio src="monson.mp3" autoplay> </audio>

L’élément <audio> permet aussi d’intégrer différents formats de fichiers : en .ogg, en .mp3… Dans l’exemple suivant, si le navigateur ne reconnaît pas le format .ogg, il lira le format .mp3

<audio controls>
 <source src="monson.ogg" type="audio/ogg">
 <source src= "monson.mp3" type="audio/mpeg">
 </audio>

Il est également possible d’utiliser cette balise simplement avec la librairie JavaScript html5media, qui inclut toutes ces fonctionnalités sans devoir les coder.
Première étape, copier-coller le code suivant entre les balises <head> de votre page :

<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>

Deuxième étape, intégrer l’élément <audio> dans votre page HTML :

<audio src="monson.mp3" controls preload>
 </audio>

Compatibilité avec IE8 et versions antérieures : puisque ces navigateurs ne « lisent » pas le HTML5, il est conseillé d’installer un « fallback » avec un lecteur flash pour assurer une compatibilité de lecture maximale de votre fichier.

<audio src="monson.mp3" controls preload>
 <object data=" dewplayer.swf?son=monson.mp3" type="application/x-shockwave-flash">
 <param name="movie" value="dewplayer.swf?son=mechantes/monson.mp3" />
 </object>
</audio>

Intégrer de la vidéo sur votre site, mode d’emploi

Avant le HTML5, pour lire un fichier vidéo sur son site, il fallait utiliser un lecteur (player) de format flv en flash, comme Flash FLV Playerpar exemple. Comme pour le son, il fallait installer ce lecteur sur votre serveur web. Il fallait également convertir votre fichier au format de lecture flash (.flv). Le code donnait quelque chose comme ceci :

<object type="application/x-shockwave-flash" data="player.swf?file=mavideo.flv" width="420" height="280">
 <param name="movie" value=" player.swf?file=mavideo.flv"/>
 <param name="allowFullScreen" value="true" />
 <param name="allowScriptAccess" value="always" />
 <param name="wmode" value="opaque" />
 </object>

Avec le HTML5, on utilisera la balise <video> :

<video src="mavideo.mp4" controls width="420" height=”280”>
 </video>

Les attributs de l’élément <video> sont : loop (lecture en boucle), autoplay (lecture automatique), preload (préchargement), poster (image en fond d’écran lorsque le lecteur est à l’arrêt) et controls (affiche le panneau de contrôle). Attention : le panneau de contrôle (lecture, pause, play, son…) changera d’aspect en fonction du navigateur.

<video src="mavideo.mp4" controls width="420" height=”280” poster="monimage.jpg">
</video>

Le HTML5 n’est pas compatible avec les versions antérieures à IE9. Pour que votre vidéo s’affiche correctement dans ces versions, il faudra prévoir un fichier flash (fallback) de remplacement. A noter également que tous les navigateurs ne lisent pas tous les formats de fichiers vidéo, il faudra donc idéalement prévoir plusieurs formats pour assurer une compatibilité de lecture maximale.

Outils de conversion de fichiers multimédias

• Super : www.erightsoft.com/SUPER.html (logiciel gratuit)
• Easy HTML5 : http://easyhtml5video.com (logiciel gratuit)
• Free Video Converter : www.koyotesoft.com (logiciel gratuit)
• You Convert It : www.youconvertit.com/ConvertFiles.aspx (outil de conversion en ligne)
• Media Converter : www.mediaconverter.org (outil de conversion en ligne)

Compatibilité navigateurs

Navigateur/Support Format audio Format vidéo
Internet Explorer mp3 mp4
Safari AAC, mp3 mp4
Firefox Vorbis WebM, OGG Theora
Chrome AAC, mp3, Vorbis mp4, WebM, OGG Theora
Opera Vorbis WebM, OGG Theora
iPad/iPhone AAC, mp3 mp4
Android AAC mp4

Code complet (avec « fallback » en flash) :

<video controls width="420" height=”280” poster="monimage.jpg">
 <source src="mavideo.WebM" type=”video/webm”>
 <source src="mavideo.ogv" type=”video/ogg”>
 <source src="mavideo.mp4" type=”video/mp4”>
 <object type="application/x-shockwave-flash" data="player.swf?file=mavideo.flv" width="420" height="280">
 <param name="movie" value=" player.swf?file=mavideo.flv"/>
 <param name="allowFullScreen" value="true" />
 <param name="allowScriptAccess" value="always" />
 <param name="wmode" value="opaque" />
 </object>
 </video>

Pour les paresseux : certains sites proposent des lecteurs vidéo compatibles et complets avec un « fallback » en flash intégré. Pour les installer, suivre les guides d’installation fournis. Voici quelques exemples (à titre indicatif) :

• HTML5 Video : http://videojs.com/ (avec flash)

• JW Player : http://www.longtailvideo.com/players/jw-flv-player/

• Leanback Player : http://leanbackplayer.com/ (HTML5 uniquement)

Rappelons que si vous hébergez vos vidéos sur des sites comme YouTube ou Dailymotion, ceux-ci fournissent un code prêt à l’emploi pour une intégration facile et rapide sur vos pages web : dans ce cas, un simple copier-coller suffit.

L. D.

Sources et ressources :

Un article introductif au HTML5 pour les journalistes (en anglais)

Le point sur la vidéo en HTML5 (en anglais)

HTML5 pour les webdesigners, Jeremy Keith, éd. Eyrolles, 98 p. (2010)

HTML5 se dévoile (sur le site Alsacréations.com)

• Tutoriels pour apprendre le HTML5 sur le site W3School (en anglais)

© AJP 2014 // Association des journalistes professionnels // Maison des journalistes, rue de la Senne 21, 1000 Bruxelles // info(at)ajp.be // A PROPOS/CONTACT