(Calamart.org) Le Blog de Stéphane Dalmard
(Calamart.org) Le Blog de Stéphane Dalmard
Html5 et Video
dimanche 12 janvier 2014, par
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 ?
Archives
