Avec html5 l'intégration de vidéos dans une page web devient facile et permet une complète interopérabilité du média. De plus l'ajout de code javascript permet une réelle optimisation du lecteur.

1) Intégration du lecteur

<video src="url" controls="controls" poster="url" width="720" height="540">Ce navigateur ne supporte pas HTML5 Video, mais vous pouvez télécharger la vidéo pour une lecture en local.</video>

Le fait de présenter plusieurs sources vidéos fera que si la première ne peut être chargée alors le navigateur essaiera la suivante et ainsi de suite.

<video controls="controls" poster="url" width="720" height="540"  preload="auto">
<source src="url" type="video/mp4" />
<source src="url" type="video/webm" />
<source src="url" type="video/ogg" />
Ce navigateur ne supporte pas HTML5 Video, mais vous pouvez télécharger la vidéo pour une lecture en local.
</video>


Options basiques du lecteur

  • Afficher les éléments de controles de lecture (différent selon les navigateurs):

    controls="controls"

  • Charger la video dès le chargement de la page:

    preload="auto"
  • Lancer la video dès le chargement de la page:

    autoplay="true"
  • Ajouter une image de fond:

    poster="url"
  • Lecture en boucle:

    loop



2) Normes de codage vidéo :


Il est nécessaire pour des raisons d’interopérabilité de proposer différents formats vidéos.



Implémentation selon les navigateurs :















Navigateur\formatH.264/MP4OGG/TheoraWebM/VP8
Firefoxnonoui (Firefox 3.5+)oui (Firefox 4+)
Google Chromeoui (Chrome16-)oui (Chrome 4+)oui (Chrome 6+)
Safarioui (Safari 5+)nonnon
Operanonoui (Opera 10.5+)oui (Opera 10.6+)
Internet Exploreroui (IE 9+)nonoui (si codec installés)



3) Qualité d'encodage


Suivant le terminal et la qualité de connexion de l'utilisateur il est préférable de proposer différents formats et qualités d'encodages pour une lecture en streaming.


Ci-dessous un tableau proposant pour une résolution un débit du flux.













ratio\débit6 Mbps2 Mbps750 Kbps350 Kbps150 Kbps
1,33768x576720x540640x480384x288240x180
1,771280x720720x406640x360384x216240x136
1,771920x1080



4) SublimeVideo


Le lecteur video Html5 SublimeVideo est très complet et gratuit dans sa version basique (sans add-ons).


Il permet via l'insertion d'un script javascript d'avoir un bon lecteur permettant notamment de switcher sur une version HD de la vidéo, de gérer des sous-titres, d'utiliser des raccourcies claviers pour contrôler le lecteur etc...


De plus une API est disponible pour manipuler les différentes fonctionnalités du lecteur.




5) Conclusion


Lorsque j'intègre une vidéo je crée donc généralement cinq vidéos différentes (j'évite pour l'instant le format OGG/Theora car je n'ai pas réussi d'encodages satisfaisants) :



  • Deux vidéos encodées en .mp4

    • Une vidéo de définition standard (exemple 720x540) à 2 ou 3 Mbps.

    • Une vidéo haute définition selon la vidéo d'origine (exemple 1280x720) à 5 ou 6 Mbps.


  • Deux vidéos encodées en .webm

    • Une vidéo de définition standard (exemple 720x540) à 2 ou 3 Mbps.

    • Une vidéo haute définition selon la vidéo d'origine (exemple 1280x720) à 5 ou 6 Mbps.


  • Et une vidéo .mp4 pour les terminaux mobiles
    • Une vidéo avec une faible définition (exemple 640x480) à 750 Kbps.


Exemple d'intégration du lecteur SublimeVideo:



<video id="0" class="sublime" preload="auto" poster="../video.jpg" width="600" height="450" data-uid="0" preload="auto">
<source src="../video-2,5Mbps.mp4" />
<source src="../video-5Mbps.mp4" data-quality="hd" />
<source src="../video-750Kbps.mp4" media="handheld" />
<source src="../video-webmsd.webm" />
<source src="../video-webmhd.webm" data-quality="hd" />
</video>


nb: le logo HTML5 de l'article est a attribuer au W3C.


ref : Introduction à la balise video de HTML5


ref : "Comprendre la vidéo numérique" de Jean-Charles Fouché


ref: Aide TouTube, Paramètres avancés de codage recommandés pour la mise en ligne