12 Contenu audio et vidéo ~ Html & Css ~ DelahayeYourself

12 Contenu audio et vidéo

Maintenant que nous sommes à l'aise pour ajouter de simples images dans une page web, nous passons à l'étape suivante : ajouter de la vidéo et un lecteur audio à vos documents HTML. Dans ce tp, nous nous contenterons de le faire avec les éléments <video> et <audio>.

Audio et vidéo sur le web

Les développeurs ont toujours voulu utiliser la vidéo et l'audio sur le web et ce, dès le début des années 2000, quand nous avons commencé à disposer d'une bande passante suffisamment rapide pour supporter toutes sortes de vidéos (les fichiers vidéo étant beaucoup plus lourds que du texte ou des images). Au départ, les technologies embarquées telles que HTML n'avaient pas la capacité d'intégrer de la vidéo ou de l'audio, donc, les solutions « propriétaires » (ou basées sur des greffons) comme Flash (puis, plus tard, Silverlight) sont devenues très populaires pour gérer ce type de contenu. Ces technologies fonctionnaient bien mais avaient de nombreux inconvénients, comme une relation aléatoire avec les fonctionnalités HTML/CSS, des problèmes de sécurité et d'accessibilité.

Nous ne vous apprendrons pas à produire des fichiers audio ou vidéo — cela demande des compétences totalement différentes. Voici quelques fichiers d'échantillons audio et vidéo.

L' élément `<video>`

L'élément <video> vous permet d'intégrer de la vidéo très facilement. En voici un exemple :

<video src="video/stacraft_ii_trailer_1080p.webm" controls>
  <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="video/stacraft_ii_trailer_1080p.webm">lien vers la vidéo</a>.</p> 
</video>

Les fonctionnalités de ce code sont :

src De la même manière que pour l'élément <img>, l'attribut src (source) contient le chemin vers la vidéo que vous voulez intégrer. Cela fonctionne de la même manière.
controls Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'épilepsie.)
Le paragraphe dans la balise <video> Cela peut s'appeler solution de repli ou contenu de secours (fallback content) — si le navigateur accédant à la page ne supporte pas l'élément <video>, cela offre un texte alternatif qui peut être ce que vous voulez ; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l'utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu'il utilise.

Faites un essai de cet exemple.

Gestion de différents formats

Il y a un problème avec l'exemple au-dessus que vous avez dû rencontrer si vous avez accédé au à votre document avec un navigateur comme Safari ou Internet Explorer. La vidéo ne se lancera pas ! Ceci parce que les navigateurs acceptent des formats différents de video et d'audio.

Voyons-en rapidement la terminologie. Les formats comme le MP3, MP4 et le WebM sont appelés des formats conteneurs. Ils contiennent plusieurs parties qui, ensemble, donnent l'intégralité de la chanson ou de la vidéo — comme une piste audio, une piste vidéo et les métadonnées qui décrivent le média qui est lu.

Les pistes audio et vidéo sont aussi de différents formats, par exemple :

Un conteneur WebM empaquette de l'audio Ogg Vorbis avec de la vidéo VP8/VP9. Firefox et Chrome, en particulier, assurent sa prise en charge.
Un conteneur MP4 assemble de l'audio AAC ou MP3 en audio avec de la vidéo H.264. Internet Explorer et Safari, principalement, le prennent en charge.
L'ancien conteneur Ogg rassemblait de l'audio Ogg Vorbis et de la vidéo Ogg Theora. Il était essentiellement pris en charge par Firefox and Chrome, mais il a été supplanté par le format WebM qui est de meilleure qualité.

Un lecteur audio peut jouer directement une piste audio, par ex. un fichier MP3 ou Ogg. Elles ne nécessitent pas de conteneur.

Les formats ci-dessus ont été créés pour compresser la vidéo et l'audio dans des fichiers gérables (les fichiers vidéo et audio bruts sont très volumineux). Les navigateurs contiennent différents Codecs, comme Vorbis ou H.264, utilisés pour convertir le son et la vidéo compressés en binaire et inversement. Comme indiqué ci-dessus, les navigateurs ne supportent malheureusement pas tous les mêmes codecs, vous devrez donc fournir plusieurs fichiers pour chaque production de média. S'il vous manque le bon codec pour décoder le média, il ne pourra pas être lu.

Alors, comment faire ? Jetez un coup d'œil à l'exemple qui suit, mis à jour:

<video controls>
  <source src="video/stacraft_ii_trailer_1080p.mp4" type="video/mp4">
  <source src="video/stacraft_ii_trailer_1080p.webm" type="video/webm">
  <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="video/stacraft_ii_trailer_1080p.mp4">lien sur la vidéo</a>.</p>
</video>

Ici, nous avons retiré l'attribut src de la balise <video> et inclus des éléments <source> séparés qui pointent vers des sources appropriées. Dans ce cas, le navigateur parcourra les éléments <source> et jouera le premier dont il peut prendre en charge le codec. Inclure des sources WebM et MP4 devraient suffire pour lire votre vidéo sur la plupart des plateformes et navigateurs de nos jours.

Chaque élément <source> possède également un attribut de type. C'est facultatif, mais il est conseillé de les inclure — ils contiennent le type MIME des fichiers vidéo, et les navigateurs peuvent le lire et sauter immédiatement les vidéos qu'ils ne comprennent pas. Si le type n'est pas indiqué, le navigateur va charger et essayer de lire chaque fichier jusqu'à ce qu'il en trouve un qu'il prenne en charge, ce qui demande du temps et des ressources.

Autres fonctionnalités de `<video>`

<video controls autoplay loop muted poster="img/stacraft_ii_poster.png">
    <source src="video/stacraft_ii_trailer_1080p.mp4" type="video/mp4">
    <source src="video/stacraft_ii_trailer_1080p.webm" type="video/webm">
    <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="video/stacraft_ii_trailer_1080p.mp4">lien vers la vidéo</a>.</p>
</video>

Voici les nouvelles fonctionnalités :

autoplay Cet attribut permet de lancer immédiatement la lecture de l'audio ou de la vidéo pendant que le reste de la page se charge. Nous vous déconseillons d'utiliser la lecture automatique de vidéos (ou audio) sur vos sites, car les utilisateurs peuvent trouver cela vraiment ennuyeux.
loop Cet attribut permet de relancer en boucle la lecture de la vidéo (ou de l'audio). Cette façon de procéder pouvant être mal perçue, ne l'utilisez que si c'est vraiment nécessaire.
muted Cet attribut coupe le son de la vidéo par défaut.
poster Cet attribut prend comme valeur l'URL d'une image affichée avant la lecture de la vidéo. Il s'utilise en tant que logo de démarrage ou de publicité.
preload Cet attribut s'utilise pour mettre en tampon les gros fichiers. Il peut prendre 3 valeurs : "none" : ne pas mettre le fichier dans un tampon, "auto" : mettre le fichier média dans un tampon et "metadata" : ne mettre que les métadonnées dans le tampon

Notez que nous n'avons pas inséré l'attribut autoplay dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster !

L'élément `<audio>`

L'élément <audio> fonctionne exactement de la même manière que l'élément <video>, mais avec quelques menues différences décrites plus bas. Un exemple classique ressemble à ceci :

<audio controls>
  <source src="audio/stacraft_main_menu.mp3" type="audio/mp3">
  <source src="audio/stacraft_main_menu.ogg" type="audio/ogg">
  <p>Votre navigateur ne prend pas en charge l'audio HTML5. Voici, à la place, un <a href="audio/stacraft_main_menu.mp3">lien vers l'audio</a>.</p>
</audio>

Cela prend moins de place qu'une vidéo, et il n'y a pas de composante visuelle — il est juste nécessaire d'afficher les contrôles de lecture de l'audio. Il ne prend pas en charge non plus l'attribut poster — toujours pas de composant visuel.

Excepté ce qui précéde, <audio> accepte les mêmes fonctionnalités que <video> — revoyez les sections ci-desssus pour plus d'informations à ce propos.

À vous de jouer

Après avoir testé les différents éléments précédent, créer un site basique qui listera les trois jeux suivants de la saga StarCraft: StarCraft, StarCraft Ghost (RIP) et StarCraft II.

Il vous faudra :

Télécharger les fichiers audio et vidéo dans un nouveau dossier sur votre ordinateur depuis l'url suivante.
Créer un nouveau fichier HTML dans le même répertoire nommé : index.html qui listera les documents dédié à chaque jeu.
Ajouter des éléments <audio> et <video> dans chaque page; faire en sorte qu'ils affichent les contrôles par défaut du navigateur.
Leur attribuer (aux deux) des éléments <source> que le navigateur puisse trouver le meilleur format audio et le charger. N'oubliez pas d'inclure les attributs type.
Donner à l'élément <video> une image qui sera affichée avant que la vidéo ne démarre.

En bonus, vous pouvez chercher des images et des textes à intégrer comme celui-ci pour StarCraft :

In the distant future, a small group of human exiles have been doomed to fight for survival on the edge of the galaxy. Through military strength, espionage, and deceit, a unified Terran government has maintained an uneasy peace. But as resources and fuel run short, the Confederate nations find themselves looking towards the rich worlds of their alien neighbors, the enigmatic Protoss. To further complicate matters, it seems that a previously unknown species-- the Zerg-- has entered Protoss space and is destroying everything in its path. The time for war has come.