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


1 commentaires:

Very informative and useful content has been shared out here. Thanks for sharing it.

Reply

Enregistrer un commentaire