Html5 et Video - Calamart.org

(Calamart.org) Le Blog de Stéphane Dalmard

(Calamart.org) Le Blog de Stéphane Dalmard

Html5 et Video

dimanche 12 janvier 2014, par Steph

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.
Le lecteur proposé par SublimeVideo, récemment racheté par Dailymotion, est certainement un bon choix dans l’optique d’un changement de support.

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.

  • H.264/MP4 (non-libre)
  • OGG/Theora (open-source)
  • WebM/VP8 (open-source)

Implémentation selon les navigateurs :

Navigateur\format H.264/MP4 OGG/Theora WebM/VP8
Firefox non oui (Firefox 3.5+) oui (Firefox 4+)
Google Chrome oui (Chrome16-) oui (Chrome 4+) oui (Chrome 6+)
Safari oui (Safari 5+) non non
Opera non oui (Opera 10.5+) oui (Opera 10.6+)
Internet Explorer oui (IE 9+) non oui (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ébit 6 Mbps 2 Mbps 750 Kbps 350 Kbps 150 Kbps
1,33 768x576 720x540 640x480 384x288 240x180
1,77 1280x720 720x406 640x360 384x216 240x136
1,77 1920x1080

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é

Un message, un commentaire ?

modération a priori

Ce forum est modéré a priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Qui êtes-vous ?
Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Archives

Promouvoir et soutenir le logiciel libre

Mots-clés