HTML5 Video

Nous avons maintenant la possibilité de fournir l'audio et lecture vidéo dans le navigateur. Avant, si nous voulons intégrer une vidéo dans un site web:

<object width="500" height="500"> 
  <param name="movie" value="URL"> 
  <param name="allowFullScreen" value="true"> 
  <param name="allowscriptaccess" value="always"> 
  <embed src="URL" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="500">
  </embed>
</object>

Probablement, vous n'avez jamais écrit manuellement ce code. La plupart des hébergeurs vidéo, tels que YouTube, offre une option "Embed" que vous pouvez la copier-coller.
Cependant, le support de la vidéo n'a pas été fournie natif dans le navigateur. Ce dernier passerait la vidéo à une plugin de type Flash.

Utilisation: 

 La balise <object> peut maintenant être remplacée par:

<video src="video.mp4"></video>
//ou bien:
<video>
  <source src="video.mp4"></source>
</video>

Support de navigateur:

HTML5 video

Nous pouvons faire chaque navigateur heureux, en fournissant de multiples balises <source>:

<video> 
  <source src="video.mp4"> 
  <source src="video.webm">
  <source src="video.ogg">
</video>

Le navigateur va lire chaque balise dans l'ordre. Si ne le support pas, il passera à la suivante.

L'attribut "type" permet d'empêcher le navigateur de "renifler" chaque balise source, nous pouvons spécifier un type MIME.

<video>
  <source src="video.mp4" type="video/mp4"> 
  <source src="video.webm" type="video/webm">
</video>

De cette façon, le navigateur n'a pas besoin de télécharger le méta informations pour la vidéo. 
Mais, qu'est-ce qui se passe dans les navigateurs qui ne reconnaissent pas la balise vidéo?
Absolument rien. Nous pouvons fournir un lien pour ces situations.

<video>
  <source src="video.mp4">
  <source src="video.webm">
  <a href="video.mp4">Télécharger le vidéo</a>
</video>

Ce lien de téléchargement ne s'affiche que dans les navigateurs qui ne le support pas la balise video.

L'attribut "controls"

 Permet d'ajouter les boutons 'Lecture', 'Pause' et la barre de défilement.

<video controls>
  <source src="video.mp4">
  <source src="video.webm">
</video>

L'attribut "autoplay"

L'attribut 'autoplay' nous permet de lire la vidéo immédiatement lorsque la page est chargés:

<video controls autoplay> 
  <source src="video.mp4"> 
  <source src="video.webm">
</video>

L'attribut "poster"

Par défaut, l'image afficher de la vidéo sera la première affiche de la vidéo. L'attribut "poster" permet de spécifier une image personnalisée.

<video controls poster="image.jpg"> 
  <source src="video.mp4"> 
  <source src="video.webm">
</video>

Il peut être utilisé aussi dans des situations où les données vidéo n'est pas encore disponible  preload = none), le contenu ou la taille de la vidéo est vide.

<video preload=none controls poster="image.jpg">

L'attribut "loop"

La spécification de l'attribut "loop" permet de lire la vidéo en boucle automatiqument.

<video controls poster="image.jpg" loop> 
  <source src="video.mp4"> 
  <source src="video.webm">
</video>

L'attribut "preload"

Indique si la vidéo peut être préchargée dès le chargement de la page ou non. Cet attribut peut prendre les valeurs:
none: pas de préchargement. Indique au navigateur de commencer à charger la vidéo uniquement lorsque l'utilisateur active les contrôles.
auto(par défaut): le navigateur décide s'il doit précharger la vidéo.
meta: charge uniquement les métadonnées (durée, etc.).

Logiciel de conversion:

• Sothink.
• Easy HTML5 vidéo.
• HandBrake.
• Miro Video Converter.