DY

TP11: 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 :

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

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 :

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.