HTML5 video Players – Tour d’horizon des lecteurs HTML5

L’utilisation du Flash à été pendant longtemps la seule solution pour publier de la vidéo en bonne qualité sur le web.. ça change (et c’est tant mieux) avec l’arrivée du HTML5 qui offre aux contenus vidéos d’intéressantes perspectives.

Grâce à  la nouvelle balise HTML5 <video> il est désormais possible de lire nativement et très simplement des vidéos sur de nombreux navigateurs et supports : firefox, chrome,  iphone, ipad, android, playstation 3, xbox…  une standardisation qui va permettre une démocratisation des contenus vidéos sans devoir avoir une colonie de plugins installés : Flash, Real player, Windows media player et d’autres + exotiques encore.

Comment faire alors pour mettre en place de la vidéo en HTML5 sur son site ? Petit tour d’horizon des players actuels et de leurs fonctions, ainsi que quelques pistes pour développer soi-même un lecteur utilisant la balise <video> de l’HTML5.

7 players vidéos en HTML5 – Librairies et plugins

Projekktor – Simply Might <video>

Tout simplement mon préféré pour les fonctionnalités avancée qu’il contient : Playlists et chaînes, intégration de publicités avant la lecture de la vidéo, fonctions de partage social Twitter et Facebook, support des anciens navigateurs avec Flash, publier la vidéo sur un autre site/blog grâce à une sortie <embed>, possibilité de créer une surcouche texte pour du sous titrage par exemple.

Projekktor supporte les formats .MP4 (H.264), .OGG (Theora), .WEBM et l’API Youtube pour la vidéo.. ainsi qu’ .OGG (Vorbis) et le MP3 pour le lecteur <audio>. Mieux encore ce lecteur vidéo HTML5 dispose d’un plugin WordPress et est distribué sous licence GNU GPL3.

Site : http://www.projekktor.com

VideoJS – HTML5 Video Player

Le plus léger des lecteurs, il mise sur son look 100% éditable via CSS et ses skins. A noter que le plugin n’utilise aucune image, les dégradés, arrondis, boutons play/pause sont entièrement réalisés en CSS3.

OpenSource la librairie VideoJS bénéficie elle aussi d’un plugin WordPress et le lecteur dispose d’une possibilité d’interaction avec jQuery.

Site : http://videojs.com

SublimeVideo – HTML5 Video Player

A la différence des autres players, SublimeVideo ne peux pas être téléchargé ni modifié. Actuellement en beta fermée, le site dispose d’un panel d’administration qui donne des statistiques sur l’utilisation du service pour chacun de vos sites. Ce lecteur 100% JavaScript est desservi directement depuis leurs CDN en ajoutant simplement une ligne de code sur votre site (donc pas besoin de faire de mise à jours).

Il dispose de sa propre API et permet des interactions avec la page que les autres lecteurs vidéos HTML5 n’offrent pas.

Site : http://sublimevideo.net

Media Front – Open Standard Media (OSM)

Entièrement écrit en jQuery l’OSM player est distribué sous licence GNU GPL 3. Il est personnalisable avec jQueryUI ThemeRoller et supporte aussi bien les vidéos HTML5 que l’importation de vidéos Youtube ou Vimeo. A noter que c’est le seul player disposant d’une extension pour Dupral.

Site : http://www.mediafront.org

Kaltura – Html5video.org

Player qui lit les balises <video> et <audio> de l’HTML5 pas grand chose d’autres à dire.. Partenaire de la Wikimedia Foundation il est le lecteur HTML5 utilisé par Wikipedia.com.

Site : http://www.html5video.org

FlareVideo

Site : http://flarevideo.com

Video for Everbody

Site : http://camendesign.com/code/video_for_everybody

Que font les majors vidéos en terme d’HTML5

Youtube en HTML5

Youtube a été le premier service à proposer une version HTML5 de leur lecteur vidéos. Vous pouvez activer la fonction player HTML5 en vous inscrivant au programme beta du lien ci dessous.

http://www.youtube.com/html5

Dailymotion

Sûrement le + impressionnant, Dailymotion offre une série de démo sur l’utilisation de la balise <video> HTML5 couplée à des fonctions CSS3 et filtres SVG. De la simple rotation, à l’effet « fil de fer » j’ai particulièrement été émerveillée par le rendu : Lumière d’ambiance, qui projette en fond un flou lumineux en rapport avec la scène. A ce sujet poke l’ami @startupz qui devrait intégrer cette fonction à son nouveau site TrailerHD.tv ça serait du plus bel effet

http://www.dailymotion.com/openvideodemo

Développement d’un player video HTML5

Comme tous bon développeurs, l’anglais ne vous fait pas peur ? Jetez vous sur le tutorial « Comment coder un lecteur video HTML5 personnalisé »  du marketplace Tuts+. Par chance ce tuto est gratuit en septembre (5$ ensuite) il vous apprendra, en vidéo, à réaliser un lecteur supportant le full-screen et la rétro-comptabilité Flash pour Internet Explorer.

En français on trouve une introduction à la balise vidéo de HTML5 par Alsacréations qui présente les bases de la syntaxe et des attributs pour la balise <video>.

Petit détoure aussi chez LaFermeDuWeb qui propose une traduction d’un benchmark sur la consommation CPU de Flash comparé à HTML5.

Un lecteur sympa ou de bons liens à partager ? C’est ci-dessous :]

J’ai terminée cet article à contre coeur car je viens de perdre mon nouveau caméscope HD dans le train.. après 4 mois même pas, c’est con… Le sujet était parti de ma documentation personnelle pour créer un lecteur personnalisé et me lancer dans les podcasts vidéos, du coup si vous n’avez pas d’idées pour noël [...]