Le multimédia

La balise <video>

La balise <video> a beaucoup fait parler d’elle car elle permet très facilement d’ajouter une vidéo à notre page. Ce qui n’était pas le cas avec les anciennes versions d’HTML.

Il est possible de paramétrer le navigateur pour qu’il charge directement la vidéo et la lise (autoplay). Des boutons pour gérer la vidéo, positionner la tête de lecture au moment voulu, lancer la lecture ou la mettre en pause, mettre la vidéo en plein écran ou ajuster le son, sont automatiquement affichés si la propriété controls est écrite dans la balise vidéo.

<video controls autoplay src='../video/danse.mp4'></video> 

Le souci qui risque d’être rencontré avec ce type de code HTML est que tous les navigateurs ne reconnaissent pas les fichiers encodés en MP4.

Il faudra donc que la vidéo soit encodée dans différents formats pour qu’elle s’affiche correctement dans tous les navigateurs.

Et comme pour l’audio, les navigateurs acceptent tous de lire différents formats vidéo, mais aucun format n’est accepté par tous les navigateurs.

Les formats qu’il faut utiliser sont MP4, OGV et WebM.

La balise <video> peut contenir plusieurs sources différentes (en fait la même vidéo mais dans des formats différents). De cette façon elle sera lue partout.

Voici un tableau montrant la compatibilité des formats vidéo avec les différents navigateurs.

Ce tableau est donné à titre indicatif, mais cela risque de changer. Et de toute façon, il est préférable de prévoir tous les formats pour être sûr que la vidéo s’affiche.

Pour être au courant de l’actualité sur la compatibilité entre le navigateur et les différents formats de vidéo, il y a un tableau à cette page qui est régulièrement mis à jour : https://en.wikipedia.org/wiki/HTML5_video#Browser_support...

Les codecs vidéo

Les formats MP4, OGV ou WebM sont des façons différentes de mettre une vidéo dans un fichier. L’encodage étant différent, la qualité et le poids seront différents également.

Il y a une infinité de codecs et chacun a des avantages et des inconvénients.

Par exemple, l’informatique est toujours tiraillée entre qualité et rapidité. Si la vidéo doit être compressée pour être utilisée sur Internet, il faudra qu’elle soit de bonne qualité certes, mais surtout la plus légère possible. C’est ce que proposent les codecs ci-dessus. Par contre, si le fichier vidéo doit être utilisé pour un spectacle en live et que la vidéo doit être déformée par rapport à la musique comme le font certains outils de VJing (un DJ passe des disques, le VJing c’est le fait de passer des vidéos), il sera préférable que le fichier ne soit pas compressé. 

Un fichier compressé demande du temps de traitement à l’ordinateur pour l’afficher correctement. Si la seule chose que fait l’ordinateur est de lire la vidéo, il peut la lire et la décoder et tout cela sera très fluide. Par contre, si l’ordinateur doit lire la vidéo, la décompresser, mais analyser également...

La balise <audio>

Pour jouer un son en HTML5, on dispose de la balise <audio>.

Il est possible de l’utiliser en la paramétrant pour qu’elle affiche des boutons de contrôle pour jouer, mettre en pause, arrêter ou encore changer le volume.

La balise <audio> possède une propriété preload permettant le chargement automatique du son. Il est possible également d’ajouter le paramètre autoplay pour que le son commence automatiquement au chargement de la page, ou encore le paramètre loop pour que le son soit joué en boucle.

<audio preload="auto" src="../audio/JohnDunbarTheme.mp3" 
autoplay loop ></audio> 

Pour afficher les boutons de contrôle du son, il suffit d’ajouter le booléen controls.

<audio preload="auto" src="../audio/JohnDunbarTheme.mp3" controls >
</audio> 

L’exemple qui suit permet de jouer un son en personnalisant le lecteur audio.

<audio preload="auto" id="duSon"> 
  <source src="../audio/JohnDunbarTheme.ogg" type="audio/ogg" /> 
  <source...