Cours HTML5 et vidéo

La balise vidéo

L'intégration d'une vidéo dans un site web a toujours été problématique et nécessitait au final de passer soit par Flash, soit par une vidéo encapsulée provenant d'une source externe (Youtube, Daily Motion, Viméo, etc.).

Le HTML5 propose une nouvelle balise spécifique pour la vidéo qui vient simplifier ce processus d'intégration. Le code de base est le suivant :

<video src="videos/garamond.mp4">
   Travail de motion design sur Garamond
</video>

L'écriture est simple, le seul problème est lié au format de vidéo à employer. En résumé, la spécification HTML5 préconise une syntaxe, mais pas de codecs vidéos (algorithmes de compression et de décompression) précis, faute d'accord entre les responsables du développement des différents navigateurs (Firefox, Safari, Explorer, Chrome, Opéra)

Afin que la vidéo soit vu sur la majorité des navigateurs, il faudra donc la convertir en plusieurs formats. Nous nous en tiendrons ici à deux formats qui permettent de couvrir les navigateurs modernes : le format mpeg4 et le format ogg/theora.

Sur Mac OS X, un logciel permet la conversion de manière quasi-directe : Miro Video Converter.

L'écriture reste toujours très simple, il est conseillé de mettre la partie .mp4 en premier :

<video width="640" height="360" controls="controls">
   <source src="videos/garamond.mp4" type="video/mp4" />
   <source src="videos/garamond.theora.ogv" type="video/ogg" />
   Travail de motion design sur Garamond
</video>

Les vidéos sont téléchargeables à ces adresses :

La balise video accepte plusieurs attributs ou options :

L'article suivant résume très bien tout cela :


Contrôles personnalisés en JavaScript

La balise video étant une balise HTML classique, elle est personnalisable en CSS. Il est possible de placer des éléments par-dessus la vidéo, tout comme avec les éléments classiques.

Une autre fonctionnalité intéressante pour nous, c'est que la vidéo peut être contrôlée grâce à JavaScript. Cela signifie que l'on va désactiver les contrôles standard de la vidéo, puis créer des éléments graphiques en HTML(textes, images...) dont on va programmer le comportement afin qu'ils puissent jouer ou mettre en pause la vidéo par exemple. Voici ce qu'il est possible de faire assez facilement :

En résumé, n'importe quel élément de votre page peut contrôler la vidéo, ce qui vous donne une liberté graphique totale. Grâce à la connaissance du temps écoulé, vous pouvez imaginer de synchroniser des éléments sur des temps précis.

Nous avons commencé à utiliser jQuery, une bibliothèque qui vient simplifier l'utilisation du JavaScript. Nous choisirons donc ici de vous présenter quelques exemples de contrôle en jQuery/JavaScript

Ces codes seront à placer dans le fichier "commun.j" (voir le cours correspondant), ou directement dans le corps de la page, en utilisant les balises script et le code jQuery adéquat.

Jouer une vidéo

Pour une balise vidéo portant l'identifiant "player" et un élément HTML portant l'identifiant "play".

$('#play').click(
   function(){
      var video = $('#player').get(0);
      video.play();
      return false;
   }
);

Mettre en pause la vidéo

Pour une balise vidéo portant l'identifiant "player" et un élément HTML portant l'identifiant "pause".

$('#pause').click(
   function(){
      var video = $('#player').get(0);
      video.pause();
      return false;
   }
);

Plus globalement, l'interface de votre page peut réagir à des événements liés à la vidéo, voici un exemple complet :


La synchronisation

Le HTML5 nous donne la possibilité de connaître à tout moment la position de la tête de lecture. Nous pouvons ainsi utiliser ce paramètre pour synchroniser des événements avec la lecture de la vidéo (affichage d'une image, déploiement d'une rubrique...).

Exemples

Voici deux exemples en ligne :

  1. Synchronisation de textes avec la vidéo
  2. Même exemple, mais au même moment que l'apparition du quatrième texte, un voile bleu (une div HTML) se positionne sur la vidéo pendant quelques secondes. Il est possible de cumuler autant d'événements simultanés que vous le souhaitez.

Téléchargement des fichiers exemple

Les fichiers sont disponibles à l'adresse suivante.

Les vidéos ne sont pas incluses dans ce dossier. Elles sont téléchargeables à ces adresses :

Elles doivent ensuite être placées dans un dossier "videos" à la racine du site exemple.

Fonctionnement

Afin de simplifier la mise en œuvre de la synchronisation, j'ai développé à partir de codes existants un plugin jQuery se présentant sous la forme d'un fichier js : jquery.synchro.js. Une fois activé, il est possible de synchroniser l'apparition de n'importe quel élément HTML avec la vidéo.

Dans les deux exemples, je crée tout d'abord une div portant l'ID "slides" (la vidéo doit être au préalable intégrée grâce au code adéquat, cf. chapitre "la balise vidéo" ) :

<div id="slide"></div>

J'insère dans cette div les "slides", qui doivent se présenter sous la forme :

<div id="slide">
   <div class="slide">tout type de contenu (texte, image, vidéo, flash, etc.)</div>
   <div class="slide">tout type de contenu (texte, image, vidéo, flash, etc.)</div>
   <div class="slide">tout type de contenu (texte, image, vidéo, flash, etc.)</div>
</div>

J'ajoute les marqueurs de temps, qui définissent le point de départ et le point de fin de l'affichage d'un slide (en secondes) :

<div id="slide">
   <div class="slide" data-start="3" data-end="7">tout type de contenu (texte, image, vidéo, flash, etc.)</div>
   <div class="slide" data-start="12" data-end="40">tout type de contenu (texte, image, vidéo, flash, etc.)</div>
   <div class="slide" data-start="43" data-end="57">tout type de contenu (texte, image, vidéo, flash, etc.)</div>
</div>

Le premier slide s'affichera ainsi pendant 4 secondes à partir du moment où la vidéo arrive à 3 secondes de lecture.

Enfin, j'ajoute le code jQuery (au sein même de la page -comme dans les exemples-, ou bien dans un fichier externe commun.js) qui va déclencher le process de synchronisation . Dans notre cas, le lecteur vidéo (la balise video) porte l'ID "player"

$('#player').synchro(
   {
      playerID : 'player',
      containerID: 'slides',
      slideClass: 'slide'
   }
);

Ressources

Mis à jour le 01/03/2012 | Benoît Montigné