Balise video en HTML5

Dans ce tutoriel, nous allons aborder l'intégration de vidéo en HTML5..

La balise video

La balise <video> permet de lire une vidéo, elle supporte ces 3 formats : MP3, Wav, and Ogg

Les formats vidéos supportés

Format	Type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

Exemple


            	<video title="Wildlife" preload="auto" autoplay controls>

<source src="medias/wildlife.ogv" type="video/ogg">

<p>Wildlife</p>

</video>

<figure> et <figcaption> avec la balise video

La balise <figure> est en fait une unité de contenu, un encart pour isoler un bloc avec un contenu principalement constitué de un ou plusieurs éléments : multimédias, diagrammes, tableaux, illustrations, exemples, codes, images, vidéos, ou carrément du texte.

la balise <figcaption> permet d'afficher une légende ou une description du contenu de la figure.

Exemple

Lire une vidéo

<figure>

          <video title="Wildlife" preload="auto" controls>

<source src="medias/wildlife.ogv" type="video/ogg">

<p>Wildlife</p>

</video> 

<figcaption>Lire une vidéo</figcaption>

</figure>

Maximiser la compatibilité

Si tous les navigateurs ne sont pas compatibles avec un même codec, il peut parfois être judicieux de le remplacer par un autre. Dans l'exemple ci-dessous, si on ne peut pas lire le format mp4, on passera au format ogg.

<video title="Wildlife" preload="auto" autoplay controls>

<source src="medias/wildlife.mp4" type="video/mp4">

<source src="medias/wildlife.ogv" type="video/ogg">

<p>Wildlife</p>

</video>

Attributs de la balise video

Attribut	Valeur	Description
autoplay	autoplay	Précise si la lecture se lance automatiquement
controls	controls	Indique si les boutons de contrôles (lecture, arret …) doivent être visibles.
loop	loop	Indique si le fichier doit tourner en boucle.
preload	none = pas de préchargement (économise donc de la bande passante si le contenu audio n’est pas lu) auto = préchargement metadata = préchargement mais uniquement des métadonnées du fichier audio.	Permet d’indiquer au navigateur de précharger en arrière plan le fichier media. L’attribut preload peut prendre 3 valeurs :
src	url	Chemin ver le fichier audio
Autobuffer	autobuffer	L’attribut autobuffer est utilisé lorsque autoplay ne l’est pas et lorsque l’auteur de la page pense que la vidéo sera regardée après le téléchargement. Avec cet attribut activé, le téléchargement du film se fera en arrière-plan. Lorsque l’utilisateur la regardera, celui-ci sera en partie téléchargé, et une bonne partie du vidéo pourra être visionné sans attente. Si les attributs autoplay et autobuffer sont tous les deux spécifiés, autobuffer sera ignoré. Il est important de noter que présentement les navigateurs téléchargent automatiquement les vidéos, avec ou sans autobuffer et qu’on ne peut pas changer ce comportement. Ceci a un impact sur la bande passante utilisée par votre site Web, particulièrement si vous avez plusieurs vidéos sur une même page.
Poster	poster="photo.jpg"	L’attribut poster sert à afficher une image du vidéo (en format jpg, png ou autre) si le vidéo ne se charge pas pour une raison ou une autre. Cette image peut être locale au serveur accédé ou peut provenir d’ailleurs sur le Web.
width	width="400"	Définit la largeur
height	height="250"	Définit la hauteur
muted	muted="muted"	Permet de couper le son

Contrôle avec Javascript


<button onclick="playPause()">Play/Pause</button> 

  <button onclick="makeBig()">Big</button>

  <button onclick="makeSmall()">Small</button>

  <button onclick="makeNormal()">Normal</button>

  <button onclick="makeNosound()">Muted</button>

  <br><br>

  <video title="Wildlife" preload="auto" controls width="420" class="center-block" id="video1">

  <source src="medias/wildlife.ogv" type="video/ogg">

  <p>Wildlife</p>

  </video>

  </div> 


  <script> 

  var myVideo = document.getElementById("video1");

  function playPause() { 

  if (myVideo.paused) 

  myVideo.play(); 

  else 

  myVideo.pause(); 

  }

  function makeBig() { 

  myVideo.width = 560; 

  }

 function makeSmall() { 

  myVideo.width = 320; 

  }

  function makeNormal() { 

  myVideo.width = 420; 

  } 

  function makeNosound() { 

  myVideo.muted="muted"; 

  } 

  </script>

Tutoriel HTML5