HTML5 audio et video

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.

---

Introduction

Cette page reprend plusieurs éléments de la même page sur EduTechWiki en anglais et ajoute également des fonctionnalités liées à JavaScript.

Ce tutoriel montre l’usage des éléments multimédia audio et vidéo avec HTML5. HTML5 propose en effet des balises (i.e.tags) qui permettent d’inclure des fichiers audio et vidéo dans des pages HTML sans faire recours à des plugin externes (e.g. Adobe Flash) comme c’est le cas pour HTML4.x et XHTML 1.x. Grâce aux balises audio et video, les éléments multimédia sont totalement intégrés dans la page, ce qui permet notamment de :

1. Utiliser des attributs HTML5 pour définir des contrôles (play, pause, etc.)
2. Définir des propriétés de style CSS pour modifier l’apparence des éléments multimédia
3. Utiliser JavaScript pour contrôler les éléments et même ajouter des interactions complexes

Qu’est-ce qu’un élément multimédia

Avant de voir l’utilisation des balises HTML5, il est utile de comprendre qu’est-ce qu’un élément multimédia. Un fichier audio ou vidéo est en réalité un « conteneur » (i.e. Multimedia container format) qui contient différents types de fichiers avec des données (e.g. stream audio et/ou vidéo, sous-titres, méta-données, etc.). Le « conteneur » est ensuite comprimé (i.e. compressed) avec un codec, c’est-à-dire un algorithm de compression qui suit le même principe par exemple de l’algorithm JPEG pour les images.

Support des navigateurs

Il faut faire attention à deux aspects qui concernent la compatibilité avec les navigateurs :

1. Le navigateur est compatible avec les balises audio et vidéo de HTML5 (les versions plus récentes des navigateurs majeurs le sont aujourd’hui)
2. Le navigateur est compatible avec le format (et le codec) du fichier audio/vidéo

Pour résoudre les deux problèmes de compatibilité, il existe des solutions qui seront abordées plus bas dans la page, notamment en ce qui concerne l’utilisation d’une bibliothèque JavaScript pour la compatibilité des balises HTML5 et l’utilisation de plusieurs fichiers sources pour la compatibilité des formats audio/vidéo.

Les formats vidéo

Les formats vidéo plus populaires sur le web (avec leur codec) sont :

• Webm/VP8 avec extension .webm
• Mp4/H.264 avec extension .mp4
• Ogg/Theora avec extension .ogv

À l’origine, les spécifications HTML5 prévoyaient d’utiliser Ogg en tant que standard, mais cette décision n’a pas trouvé l’accord des différents navigateurs et par conséquent les trois formats sont idéalement supportés, même s’il y a des différences parmi les différents navigateurs. Pour une liste des formats compatibles avec chaque navigateur se référer à la page EduTechWiki en anglais ou la page HTML5 video sur Wikipedia.

• Voir Production de fichiers vidéo pour le web

Les formats audio

Les formats audio plus populaires sur le web (avec leur codes) sont :

• Ogg/Vorbis avec extension .ogg
• WAV/PCM avec extension .wav
• MP3 avec extension mp3
• AAC avec extension .m4a

Tout comme dans le cas des formats vidéo, aussi pour les fichiers audio il y a différents compatibilité entre le format et les navigateurs web. Faire référence encore une fois à la page EduTeckWiki en anglais ou à la page HTML audio sur Wikipedia.

Vidéo avec HTML5

La balise video

Pour ajouter une vidéo à une page HTML5 on utilise la balise suivante :

<video [attributs ...]>[contenu optionnel ...]</video>

La balise video peut être affichée à tout endroit dans le body du document HTML, sauf à l’intérieurs des balises :

• a
• button

De plus, la balise doit avoir un tag d’ouverture et un tag de fermeture.

Simples exemples (non conseillés)

La manière la plus simple d’inclure une vidéo avec HTML5 est la suivante :

<video src="url/video.mp4"></video>

Cet exemple inclut tout simplement une vidéo avec format mp4 (donc pas forcément compatible avec tous les navigateurs). L’absence d’attributs dans la balise video détermine notamment que la vidéo n’aura pas de contrôles (play, pause, etc.), qu’elle aura une taille déterminée par le fichier média et pas par des propriétés HTML ou CSS, etc. Voici un exemple avec quelques caractéristiques ultérieures :

<video src="url/video.webm" controls autoplay height="300" width="400" ></video>

Ce deuxième exemple inclut cette fois-ci :

• Une vidéo avec format webm
• Des contrôles standard tels que play, pause, etc. qui apparaissent lorsque la souris se pose sur la vidéo grâce l’attribut controls
• La fonction de démarrage automatique lors que la page est téléchargée avec l’attribut autoplay
• Des dimensions définies en pixels avec les attributs height et width. Veuillez noter que ces dimensions se réfèrent à la taille de la page qui est destinée à la vidéo, mais si la vidéo à une taille différente de celle proposées, elle sera automatiquement adaptée (i.e. si les proportions ne correspondent pas, des espaces noirs apparaitrons aux côtés ou en haut et en bas de la vidéo).

Example de vidéo avec les contrôls standard du navigateur web (dans ce cas Chrome)

Les attributs de la balise video

En ce qui concerne les attributs, la balise video peut être associée à tout attribut global de HTML (e.g. class, id, etc.) et a des attributs particuliers pour cette balise :

• autoplay (sans valeur) : détermine si la vidéo va démarrer aussitôt qu’elle est prête
• controls (sans valeur) : détermine si la vidéo va afficher automatiquement des contrôles tels que play, pause, volume, etc.
• height (avec valeur en pixles) : détermine la hauteur de la vidéo
• loop (sans valeur) : détermine si la vidéo recommence depuis le début une fois terminée
• muted (sans valeur) : détermine si l’audio de la vidéo s’entend ou pas
• poster (avec url d’une image) : détermine une image à afficher pendant que la vidéo est téléchargée
• preload (avec valeur à choix) : détermine le téléchargement de la vidéo par rapport au téléchargement de la page
  • auto : toute la vidéo commence à être téléchargée lors que la page est « loaded »
  • metadata : seulement les métadonnées de la vidéo sont téléchargées
  • none : la vidéo n’est pas téléchargée avant que l’utilisateur la démarre
• src (avec url du fichier média) : déterminé l’URL du fichier, il peut être remplacé par la balise source à l’intérieur de la balise video (voir plus bas dans la page)
• width (avec valeur en pixels) : détermine la largeur de la vidéo

Voir la liste complète sur W3schools http://www.w3schools.com/tags/tag_video.asp

Le contenu de la balise video

La balise video peut également contenir d’autres éléments (i.e. d’autres balises) à son intérieur. Ces éléments peuvent se diviser en deux catégories principales :

1. Des éléments relatifs à la vidéo elle-même tels que différentes fichiers média, sous-titres, etc. (voir plus bas dans cette section)
2. Des éléments de « fallback » pour les navigateurs qui ne supportent pas les vidéos HTML5. Un élément de fallback est tout simplement du contenu HTML qui s’affiche à la place de la vidéo.

Voici un example d’élément de fallback :

<video src="url/video.webm" controls autoplay height="300" width="400" >
<p>Votre navigateur n’est pas compatible avec HTML5, veuillez considérer de le mettre à jour.</p>
</video>

Dans cet exemple, le message de fallback consiste tout simplement dans un paragraphe qui explique à l’utilisateur que son navigateur n’est pas compatible avec HTML5. Ce paragraphe ne s’affichera pas pour les utilisateurs qui, au contraire, disposent d’un navigateur compatible. Ces utilisateur verront tout simplement la vidéo si leur navigateur supporte le format .webm utilisé dans cet exemple. Il est possible de créer des mécanismes de fallback plus compliqués, notamment grâce à l’utilisation de JavaScript (par exemple grâce à une bibliothèque) qui seront abordés dans la section de cette page consacrée à JavaScript.

La balise source

La balise source est un des éléments contenus dans la balise video qui est relatif à la vidéo elle-même. Cette balise est utilisé notamment pour créer des alternatives sur le format du fichier vidéo à utiliser. À la place d’utiliser l’attribut src directement dans la balise video, on utilise plutôt plusieurs balises sources emboitées. Voici un exemple qui propose trois sources différentes, mais également un message de fallback (voir plus haut dans cette page) :

<video id="movie1" controls>
<source src="url/video.mp4" />
<source src="url/video.ogv" />
<source src="url/video.webm" />
<p>Your browser doesn't support HTML5. Maybe you should upgrade.</p>
</video>

Dans cet exemple, l’attribut src est utilisé à l’intérieur de chaque balise source afin que le navigateur puisse choisir parmi trois formats différents. Lorsqu’il « intercepte » le premier format compatible, l’url de cette source sera utilisée. Il est possible également d’être plus spécifique au niveau des alternatives, notamment en ce qui concerne le type de codec utilisé. Cette possibilité est utile dans le cas de vidéo à haute résolution que le dispositif ne peut pas jouer. Voici un exemple qui utilise l’attribut type pour spécifier le codec :

<video id="movie2" controls="controls">
<source src="videos/state-of-wikipedia-480x272.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
<source src="videos/state-of-wikipedia-480x272.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="videos/state-of-wikipedia-480x272.webm" type='video/webm; codecs="vp8, vorbis"' />
<p>The video is available as <a href="videos/state-of-wikipedia-480x272.mp4">H.264 in an MP4 container</a>, 
or as <a href="videos/state-of-wikipedia-480x272.ogv">VP8 in a Ogg container</a> 
or as <a href="videos/state-of-wikipedia-480x272.webm">VP8 in a WebM container</a>. </p>
</video>

Cet exemple illustre également une alternative dans le cas que la balise vidéo ne soit pas supportée et qui consiste tout simplement à insérer des liens en tant que mécanisme de fallback pour que les utilisateurs puissent télécharger la vidéo et la regarder avec un logiciel vidéo sur leurs dispositifs.

La balise track

La balise track permet d'ajouter du contenu textuel qui sera affiché lorsque la vidéo est en cours de lecture, notamment sous forme de sous-titres ou legendes (i.e. captions en anglais). Tout comme pour la balise source, il est possibile de spécifier plusieurs balises track à l'intérieur d'une balise video, encore une fois à cause de problèmes de compatibilité dans les formats textuels supportés par les différents navigateurs web. Voici un example de vidéo complète avec des sous-titres en anglais et en français:

<video width="640" height="420" poster="video/poster.jpg" preload="metadata" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
  <source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
  <track kind="subtitles" label="EN" src="video/subtitles_en.vtt" srclang="en" type="text/vtt" default>
  <track kind="subtitles" label="FR" src="video/subtitles_fr.vtt" srclang="fr" type="text/vtt">
</video>

Les attributs de la balise track

La balise track peut être configurée avec les attributs suivantes :

• default : détermine, en cas de plusieurs balises track, quelle balise doit être prise en compte dans le cas que les préférences de l'utilisateur (e.g. langue du navigateur) ne corréspondent pas à une des options disponibles
• kind : détermine le type de contenu textuel à afficher. Parmi les options figurent :
  • subtitles : sous-titres destinés surtout à la traduction du contenu audio dans une autre langue, mais également à ajouter des informations contextuelles qui ne sont pas affichés dans la vidéo (e.g. date, auteur, copyright, etc.)
  • captions : transcription et éventuellement traduction de l'audio et des effets sonores de la vidéo, indiqués surtout pour les personnes sourdes
  • descriptions : description textuelle du contenu de la vidéo, indiqué surtout pour les personnes aveugles
  • chapters : titres des chapitres, indiqués surtout pour la navigation du contenu média
  • metadata : données utilisées par les scripts, pas visibles à l'utilisateur
• label : labellisation qui permet aux utilisateurs d'identifier d'identifier et choisir le contenu de la balise (e.g. EN pour sous-titres en anglais, FR en français, etc.)
• src : URL du fichier avec le contenu textuel (voir plus bas pour les formats et le contenu attendu)
• srclang : langue (e.g. en, fr, it, de) du contenu textuel à afficher surtout dans le cas des sous-titres

Les formats et contenu des fichiers textuels

Les fichiers associés à la balise track sont des simples fichiers textuels, mais dont le format peut varier. À présent, les formats souvent associés à ce type de fonction sont :

• WebVTT avec extension .vtt
• SRT avec extension .srt

Il existe d'autres formats, notamment le format Timed Text (TTML) qui est un format de type XML.

Voici un example de fichier WebVTT :

WEBVTT

Introduction
00:00:01.000 --> 00:01:10.000
Wikipedia is a great adventure. It may have
its shortcomings, but it is the largest collective
knowledge construction endevour

Disclaimer
00:01:10.000 --> 00:02:10.000
This is just a track demo using VTT

• Pour plus d'information sur ce format voir la page WebVTT sur ce wiki ou la page WebVtt sur Mozilla Development Network

Et un example de fichier SRT :

1
00:00:10,000 --> 00:01:10,000
Wikipedia is a great adventure. It may have shortcomings, but it remains the largest collective knowledge construction endevour

2
00:01:10,000 --> 00:02:10,000
This is just a track demo using SRT

Utiliser une bibliothèque JavaScript

Pour résoudre les problèmes de compatibilité et/ou pour améliorer le look and feel des contrôles sur les vidéos, il existe plusieurs bibliothèques JavaScript spécifiquement conçues pour les éléments vidéos. Par example la bibliothèque LeanBack Player permet de :

• Choisir un thème CSS pour le player
• Utiliser un mécanisme de fallback avec Adobe Flash
• Ajouter plusieurs track pour les sous-titres et pouvoir choisir parmi les différentes langues
• Utiliser un générateur de code pour obtenir le code HTML5 à inclure dans une page

Example de vidéo qui utilise LeanBack Player, tiré de http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html

Pour des alternatives voir la section dédiées aux bibliothèques audio/video dans la page bibliothèques JavaScript

Audio avec HTML5

La balise audio peut être considérée une versione simplifiée de la balise video. En effet, elle partage plusieurs attributs et fonctionnalités avec la balise video.

Les attributs de la balise audio

Voici la liste des attributs associés à la balise audio :

• autoplay (sans valeur) : détermine si la source audio va entamer dès que possible, sans action de la part de l'utilisateur
• controls (sans valeur) : détermine si des boutons de contrôle (play, pause, etc.) sont affichés ou pas
• loop (sans valeur) : détermine si la source audio recommence cycliquement une fois terminée
• muted (sans valeur) : détermine si le son est activé ou désactivé
• preload (avec valeurs auto, metadata ou none: détermine si et à quel moment la source audio va être téléchargée par rapport à la page qui la contient
• src (avec valeur URL) : détermine le URL de la source audio

La balise source

La balise audio accepte également plusieurs balises source à son intérieur. Voici un example :

<audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
  <p>Fallback en cas d'incompatibilité du browser</p>
</audio>

La balise track

Il est également possible d'ajouter à un fichier audio du contenu textuel avec la balise track tout comme dans le cas des vidéos, même si cette fonctionnalité n'est pas si fréquente.

Utiliser une bibliothèque JavaScript

Les bibliothèques JavaScript utilisées pour les vidéos offrent souvent des fonctionnalités également pour la balise audio. C'est le cas des bibliothèques LeanBack Player et VideoJS.