Blog ENI : Toute la veille numérique !
💥 Un livre PAPIER acheté
= La version EN LIGNE offerte pendant 1 an !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web (4e édition)
  3. Le multimédia
Extrait - Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web (4e édition)
Extraits du livre
Apprenez les langages HTML5, CSS3 et JavaScript pour créer votre premier site web (4e édition)
1 avis
Revenir à la page d'achat du livre

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.

Navigateur

MP4

OGV

WebM

Chrome

Oui

Oui

Oui

Firefox

Non

Oui

Oui

Edge

Oui

Non

Non

Opera

Non

Oui

Oui

Safari

Oui

Non

Non

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> 

Si cela peut être intéressant d’avoir quelques sons au passage de la souris sur un bouton par exemple, l’utilisateur n’appréciera pas forcément d’avoir une musique qui se met en route sans son accord en arrivant sur le site.

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...

Les codecs audio

Les navigateurs ne savent pas lire tous les formats audio :

Navigateur

WAV

MP3

OGG

Chrome

Oui

Oui

Oui

Firefox

Oui

Non

Oui

Edge

Non

Oui

Non

Opera

Oui

Non

Oui

Safari

Oui

Oui

Non

Cette liste est donnée comme référence, mais il y a fort à parier que cela change avec le temps et que de nouveaux codecs fassent leur apparition.

Pour information, le format WAV est un format non compressé qui restitue un signal audio d’une bien meilleure qualité que les deux autres. Par contre, cela se paye au niveau du poids du fichier qui pourra être jusqu’à dix fois plus lourd.

Puisque les navigateurs n’ont pas de format audio en commun, il faudra de toute façon générer les fichiers audio avec ces trois codecs pour être sûr que le son soit compatible sur tous les navigateurs.

Le site Wikipédia regroupe sur une page une partie des codecs audio, vidéo et autres fréquemment utilisés : http://en.wikipedia.org/wiki/List_of_codecs