https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1607438-la-video-et-laudio

Apprenez à créer votre site web avec HTML5 et CSS3



Depuis l'arrivée de Youtube et Dailymotion, il est devenu courant aujourd'hui de regarder des vidéos sur des sites web. Il faut dire que l'arrivée du haut débit a aidé à démocratiser les vidéos sur le Web.
Cependant, aucune balise HTML ne permettait jusqu'ici de gérer la vidéo. Il fallait à la place utiliser un plugin, comme Flash. Celui-ci reste encore en partie utilisé pour regarder des vidéos sur Youtube, Dailymotion, Vimeo et ailleurs. Mais utiliser un plugin a de nombreux défauts : on dépend de ceux qui gèrent le plugin (en l'occurence, l'entreprise Adobe, qui possède Flash), on ne peut pas toujours contrôler son fonctionnement, il y a parfois des failles de sécurité… Au final, c'est assez lourd.
C'est pour cela que deux nouvelles balises standard ont été créées en HTML5 :<video>et<audio>!
Les formats audio et vidéo

Lorsque je vous ai présenté les images et la balise<img />, j'ai commencé par un petit tour d'horizon des différents formats d'images (JPEG, PNG, GIF, etc.). Pour la vidéo et l'audio, je vais faire pareil… mais c'est plus compliqué.
En fait, le fonctionnement des vidéos est même tellement complexe qu'on pourrait faire un cours entier à ce sujet ! Étant donné qu'on parle ici de HTML, nous n'allons pas passer toutes nos prochaines nuits à étudier les subtilités de l'encodage vidéo. Je vais donc simplifier les choses et vous expliquer juste ce que vous avez besoin de savoir.
Les formats audio
Pour diffuser de la musique ou n'importe quel son, il existe de nombreux formats. La plupart d'entre eux sont compressés (comme le sont les images JPEG, PNG et GIF) ce qui permet de réduire leur poids :
MP3 : vous ne pouvez pas ne pas en avoir entendu parler ! C'est l'un des plus vieux, mais aussi l'un des plus compatibles (tous les appareils savent lire des MP3), ce qui fait qu'il est toujours très utilisé aujourd'hui.
AAC : utilisé majoritairement par Apple sur iTunes, c'est un format de bonne qualité. Les iPod, iPhone et autres iPad savent les lire sans problème.
OGG : le format Ogg Vorbis est très répandu dans le monde du logiciel libre, notamment sous Linux. Ce format a l'avantage d'être libre, c'est-à-dire qu'il n'est protégé par aucun brevet.
WAV (format non compressé) : évitez autant que possible de l'utiliser car le fichier est très volumineux avec ce format. C'est un peu l'équivalent du Bitmap (BMP) pour l'audio.
La compatibilité dépend des navigateurs, mais elle évolue dans le bon sens au fil du temps. Pensez à consulter Caniuse.com pour connaître la compatibilité actuelle du MP3, AAC,  OGG, WAV...
Les formats vidéo
Le stockage de la vidéo est autrement plus complexe. On a besoin de trois éléments :
Un format conteneur : c'est un peu comme une boîte qui va servir à contenir les deux éléments ci-dessous. On reconnaît en général le type de conteneur à l'extension du fichier : AVI, MP4, MKV…
Un codec audio : c'est le format du son de la vidéo, généralement compressé. Nous venons de les voir, on utilise les mêmes : MP3, AAC, OGG…
Un codec vidéo : c'est le format qui va compresser les images. C'est là que les choses se corsent, car ces formats sont complexes et on ne peut pas toujours les utiliser gratuitement. Les principaux à connaître pour le Web sont :
H.264 : l'un des plus puissants et des plus utilisés aujourd'hui… mais il n'est pas 100% gratuit. En fait, on peut l'utiliser gratuitement dans certains cas (comme la diffusion de vidéos sur un site web personnel), mais il y a un flou juridique qui fait qu'il est risqué de l'utiliser à tout va.
Ogg Theora : un codec gratuit et libre de droits, mais moins puissant que H.264. Il est bien reconnu sous Linux mais, sous Windows, il faut installer des programmes pour pouvoir le lire.
WebM : un autre codec gratuit et libre de droits, plus récent. Proposé par Google, c'est le concurrent le plus sérieux de H.264 à l'heure actuelle.
Là encore, surveillez bien la compatibilité sur Caniuse.com : H.264, Ogg Theora, WebM... Le format H.264 semble sortir du lot. Il est quand même conseillé si possible de proposer chaque vidéo dans plusieurs formats pour qu'elle soit lisible sur un maximum de navigateurs.
Pour convertir une vidéo dans ces différents formats, je vous conseille l'excellent logiciel gratuit Miro Video Converter.
Il vous suffit de glisser-déposer votre vidéo dans la fenêtre du programme et de sélectionner le format de sortie souhaité. Cela vous permettra de créer plusieurs versions de votre vidéo !
Insertion d'un élément audio

En théorie, il suffit d'une simple balise pour jouer un son sur notre page :

<audio src="musique.mp3"></audio>
En pratique, c'est un peu plus compliqué que cela. 
Si vous testez ce code… vous ne verrez rien ! En effet, le navigateur va seulement télécharger les informations générales sur le fichier (on parle de métadonnées) mais il ne se passera rien de particulier.
Vous pouvez compléter la balise des attributs suivants :
controls: pour ajouter les boutons « Lecture », « Pause » et la barre de défilement. Cela peut sembler indispensable, et vous vous demandez peut-être pourquoi cela n'y figure pas par défaut, mais certains sites web préfèrent créer eux-mêmes leurs propres boutons et commander la lecture avec du JavaScript.
width: pour modifier la largeur de l'outil de lecture audio.
loop: la musique sera jouée en boucle.
autoplay: la musique sera jouée dès le chargement de la page. Évitez d'en abuser, c'est en général irritant d'arriver sur un site qui joue de la musique tout seul !
preload: indique si la musique peut être préchargée dès le chargement de la page ou non. Cet attribut peut prendre les valeurs :
auto(par défaut) : le navigateur décide s'il doit précharger toute la musique, uniquement les métadonnées ou rien du tout.
metadata: charge uniquement les métadonnées (durée, etc.).
none: pas de préchargement. Utile si vous ne voulez pas gaspiller de bande passante sur votre site.
On ne peut pas forcer le préchargement de la musique, c'est toujours le navigateur qui décide.
Les navigateurs mobiles, par exemple, ne préchargent jamais la musique pour économiser la bande passante (le temps de chargement étant long sur un portable).
Ajoutons les contrôles et ce sera déjà mieux !

<audio src="hype_home.mp3" controls></audio>
L'apparence du lecteur audio change en fonction du navigateur. La figure suivante représente par exemple le lecteur audio dans Google Chrome.

Le lecteur audio dans Google Chrome
Pourquoi ouvrir la balise pour la refermer immédiatement après ?
Cela vous permet d'afficher un message ou de proposer une solution de secours pour les navigateurs qui ne gèrent pas cette nouvelle balise. Par exemple :

<audio src="hype_home.mp3" controls>Veuillez mettre à jour votre navigateur !</audio>
Ceux qui ont un navigateur récent ne verront pas le message. Les anciens navigateurs, qui ne comprennent pas la balise, afficheront en revanche le texte qui se trouve à l'intérieur.
Et si le navigateur ne gère pas le MP3, comment faire ?
Il faut proposer plusieurs versions du fichier audio. Dans ce cas, on va construire notre balise comme ceci :

<audio controls>

    <source src="hype_home.mp3">

    <source src="hype_home.ogg">

</audio>
Le navigateur prendra automatiquement le format qu'il reconnaît.
Insertion d'une vidéo

Il suffit d'une simple balise<video>pour insérer une vidéo dans la page :

<video src="sintel.webm"></video>
Mais, là encore, vous risquez d'être déçus si vous utilisez seulement ce code. Aucun contrôle ne permet de lancer la vidéo !
Rajoutons quelques attributs (la plupart sont les mêmes que pour la balise<audio>) :
poster: image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée. Par défaut, le navigateur prend la première image de la vidéo mais, comme il s'agit souvent d'une image noire ou d'une image peu représentative de la vidéo, je vous conseille d'en créer une ! Vous pouvez tout simplement faire une capture d'écran d'un moment de la vidéo.
controls: pour ajouter les boutons « Lecture », « Pause » et la barre de défilement. Cela peut sembler indispensable, mais certains sites web préfèrent créer eux-mêmes leurs propres boutons et commander la lecture avec du JavaScript. En ce qui nous concerne, ce sera largement suffisant !
width: pour modifier la largeur de la vidéo.
height: pour modifier la hauteur de la vidéo.
loop: la vidéo sera jouée en boucle.
autoplay: la vidéo sera jouée dès le chargement de la page. Là encore, évitez d'en abuser, c'est en général irritant d'arriver sur un site qui lance quelque chose tout seul !
preload: indique si la vidéo peut être préchargée dès le chargement de la page ou non. Cet attribut peut prendre les valeurs :
auto(par défaut) : le navigateur décide s'il doit précharger toute la vidéo, uniquement les métadonnées ou rien du tout.
metadata: charge uniquement les métadonnées (durée, dimensions, etc.).
none: pas de préchargement. Utile si vous souhaitez éviter le gaspillage de bande passante sur votre site.
On ne peut pas forcer le préchargement de la vidéo, c'est toujours le navigateur qui décide.
Les proportions de la vidéo sont toujours conservées. Si vous définissez une largeur et une hauteur, le navigateur fera en sorte de ne pas dépasser les dimensions indiquées mais il conservera les proportions.
Voici un code un peu plus complet :

<video src="sintel.webm" controls poster="sintel.jpg" width="600"></video>
Et le résultat :

Une vidéo avec les options de lecture et une taille définie
Pourquoi ouvrir et refermer immédiatement après la balise ?
La réponse est la même que pour la balise<audio>. Cela vous permet d'afficher un message ou d'utiliser une technique de secours (en Flash) si le navigateur ne reconnaît pas la balise :

<video src="sintel.webm" controls poster="sintel.jpg" width="600">

    Il est temps de mettre à jour votre navigateur !

</video>
Comment contenter tous les navigateurs, puisque chacun reconnaît des formats vidéo différents ?
Vous utiliserez la balise<source>à l'intérieur de la balise<video>pour proposer différents formats. Le navigateur prendra celui qu'il reconnaît :

<video controls poster="sintel.jpg" width="600">

    <source src="sintel.mp4">

    <source src="sintel.webm">

    <source src="sintel.ogv">

</video>
Les iPhone, iPad et iPod ne reconnaissent à l'heure actuelle que le format H.264 (fichier.mp4)… et uniquement si celui-ci apparaît en premier dans la liste ! Je vous recommande donc d'indiquer le format H.264 en premier pour assurer une compatibilité maximale.
Comment protéger ma vidéo, je ne veux pas qu'on puisse la copier facilement !
Ce n'est pas possible. Les balises n'ont pas été conçues pour limiter ou empêcher le téléchargement. C'est assez logique quand on y pense : pour que le visiteur puisse voir la vidéo, il faut bien de toute façon qu'il la télécharge d'une manière ou d'une autre !
N'espérez donc pas empêcher le téléchargement de votre vidéo avec cette technique.
Les lecteurs vidéo Flash permettent de « protéger » le contenu des vidéos mais, là encore, des solutions de contournement existent. De nombreux plug-ins permettent de télécharger les vidéos, de Youtube par exemple.
En résumé

Insérer de la musique ou de la vidéo n'était pas possible autrefois en HTML. Il fallait recourir à un plugin comme Flash.
Depuis HTML5, les balises<audio>et<video>ont été introduites et permettent de jouer de la musique et des vidéos sans plugin.
Il existe plusieurs formats audio et vidéo. Il faut notamment connaître :
pour l'audio : MP3 et Ogg Vorbis ;
pour la vidéo : H.264, Ogg Theora et WebM.
Aucun format n'est reconnu par l'ensemble des navigateurs : il faut proposer différentes versions de sa musique ou de sa vidéo pour satisfaire tous les navigateurs.
Il faut ajouter l'attributcontrolsaux balises<audio>et<video>pour permettre au visiteur de lancer ou d'arrêter le média.
Ces balises ne sont pas conçues pour empêcher le téléchargement de la musique et de la vidéo. Vous ne pouvez pas protéger votre média contre la copie.