Les médias et les multimédias

Afin d’améliorer l’expérience utilisateur et de permettre aux navigateurs de pouvoir directement lire l’ensemble des médias, et des multimédias, HTML5 a introduit quelques nouvelles balises parmi lesquelles on trouve  <video>, <audio>, <svg>, <canvas>.

Du coté des images, la balise <img> a bien été renforcée, avec les balises <figure> et <picture>, qui permettent de décrire plus abondamment les illustrations, mais aussi avec l’apparition des attributs srcset et sizes qui autorisent la publication d’images qui soient mieux adaptées aux divers périphériques, et/ou, à la taille de la fenêtre de visualisation.

Enfin, pour les autres éléments qui ne seraient pas forcément présents de manière intégrée (pdf, swf, xls …), nous avons toujours recours à la balise <embed> ou la plus générique balise <object>.Notez également que certains éléments de flux (youtube, dailymotion…) peuvent également être intégré au contenu de la page en usant d’un cadre <iframe> qui permet d’ouvrir une fenêtre sur un environnement tierce, et extérieur.

Revenons, au cours de cet article, sur chacun de ces éléments de manière plus approfondie et voyons comment les mettre en place.

Audio / Vidéo

<!-- Vidéo -->
<video controls>
    <source src="video.mp4" />
    <source src="video.webm" />
    <source src="video.ogv" />
</video>

<!-- Audio -->
<audio controls>
    <source src="audio.ogg" />
    <source src="audio.mp3" />
</audio>

Gestion des images

Avant d’aller plus loin dans la gestion HTML des images, rapprochez vous déjà de l’article sur L’image numérique, ensuite prenons le temps d’explorer dans un premier temps, et au sein de ce chapitre,  les images en tant que poster, qu’elles soient animées ou non, et, dans un second temps au cours du prochain chapitre, l’imagerie, ou plutôt la fabrique de l’image en temps réel, que celle ci soit fixe, animée ou interactive.

Depuis que HTML existe, nous avons accès à la synthétique, et très limitée, balise <img> qui permet, au travers de son attribut src, de placer une image au sein d’un flux de contenu. Les formats utilisables sont multiples et variés allant de Jpeg à WebP, mais en passant par d’autres formats pas nécessairement pris en compte par le parc des navigateurs. Voir à ce sujet le tableau des formats image présentés sur l’article l’image numérique;

L’attribut srcset

Il existe divers types d’écrans qui proposent diverses résolutions, ou qui ont une homothétie différente, ou qui sont plutôt utilisés horizontalement que verticalement ou inversement, ou qui ont une diagonale de 32″ ou de 5″… bref nous avons à disposition une distribution qui est possible sur tout autant d’écrans, et de types d’écran, qu’il existe de périphériques. Pour cela, il nous faut pouvoir lier divers types, ou format, d’images répondant de manière optimisée pour chaque périphériques à la balise  <img>.

En ce sens, HTML5 nous apporte le nouvel attribut srcset propre à la balise <img>, qui va permettre de lier plusieurs images, qui seront utilisées de manières diverses, en fonction des périphériques, ou des paramètres.

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x,
                                 image-3x.png 3x, image-4x.png 4x">

d

L’attribut sizes

La gestion responsive des sites amène à également prendre en compte l’aspect responsive des images et de leur représentation. Le w3c prend en compte cette dimension, si l’on peut dire, en ajoutant l’attribut sizes à la balise <img>.

Les balises <picture> et <figure>.

Conjointement à l’attribut srcset, HTML5 a également produit la balise <picture> à ne pas confondre avec la balise <figure> . Prenons quelques instants pour explorer leurs différences et leurs objectifs. L’une étant le prolongement de la balise <img>, donc gérant le fond, alors que l’autre contextualise la forme et permet de compléter les informations sur l’image.

Imagerie bitmap ou vectorielle

L’utilisation de balises <canvas> (graphique bitmap) et <svg> (graphique vectoriel) repose principalement sur des langages tierces, Javascript pour le premier et SVG qui n’est autre qu’une grammaire XML pour le second. En ce sens, cela dépasse le cadre de cet article. Deux articles sont en cours d’écriture pour définir l’utilisation de base de ces balises… n’hésitez pas à nous contacter si vous souhaitez accélérer leur réalisation.

Voici un exemple réalisé en <canvas>, et ici un autre exemple en <svg>. Dans les deux, cliquez sur l’animation et inspectez le code source. Sinon veuillez voir ci-dessous deux exemples basiques qui permettent de se rendre compte de l’approche nécessaire pour leur utilisations respectives:

Canvas

SVG

Et les autres éléments…

Il est parfois encore nécessaire d’employer des animations SWF, et bien que cela soit progressivement remplacé (soit par les balises <audio> et <vidéo> vues précédemment, soit par des animations <canvas>, soit par des animations et des transitions basées sur CSS et Javascript, ou encore par du <svg>), nous pouvons avoir à intégrer des animations SWF. Bien sur, cela s’est encore simplifié avec HTML5. Dorénavant, il n’est plus nécessaire d’avoir recours à des usines à gaz pour le mettre en place. Les balises <embed> ou <object> permettent de rapidement gérer cette intégration.

Cependant, il existe une différence entre ces deux balises qu’il est important de prendre en compte. Commençons par un peu d’histoire. Par le passé, seule la balise <object> était standard, et comprise par l’ensemble des navigateurs excepté par Firefox. Par contre, et toujours à cette même époque, la balise <embed> était comprise par l’ensemble des navigateurs, mais n’était pas standard, et donc ne validait pas le contenu de la page. De ce fait, des montages assez alambiqués pouvaient être rencontrés. Aujourd’hui, une seule balise peut être nécessaire, mais laquelle ?

Alors regardons du côté du w3c : la balise <object> représente un contenu extérieur… ce qui peut être aussi bien une animation nécessitant un plug in, qu’une image, ou une animation interactive SVG… alors que <embed> est un point d’insertion pour un plug in. Un peu limitatif certes, mais clair, et unique. Car c’est vrai, quelle balise choisir entre <object> et <img>, entre <object> et <svg>, ou entre <object> et <iframe>… bref… <object> peut devenir rapidement obsolète de par son rôle trop vague et souvent redondant. Donc, que nous ayons à intégrer du SWF, du PPT, du XLS, du PDF… bref, <embed> peut faire le job, surtout si nous travaillons en HTML5 (pour le côté validation). Regardez la différence d’attribut entre les deux balises :

<embed src="document.pdf" type="application/pdf" /> 
<object data="document.pdf" type="application/pdf" />