• A la une
  • Catégories
  • Dossiers
  • Rédacteurs
  • +

Tout savoir sur la balise video du HTML5 #2

par Benjamin SANCHEZle 03/05/2011

Pour tout savoir sur la balise vidéo du HTML5, voici le second article d'une série d'articles traitant de l'histoire, le fonctionnement et les façons d'intégrer la balise Vidéo dans vos sites web. Au programme aujourd'hui: les différents players HTLM5

Pour ce nouvel article, nous allons examiner les plus gros players HTLM5 du moment. Nous allons nous centrer sur la simplicité d'intégration et de maintenance du player, l'efficacité des contrôles et le plaisir d'utilisation, et enfin, l'aspect graphique du player.

SublimeVideo

sublimevideo

Ce lecteur est le seul payant de toute la liste. Le prix évolue en fonction du nombres de pages vues, et est à payer par site et par mois. Plus de précision ici.

Simplicité:

Je n'ai pas pu le tester, de part son aspect payant, mais d'après le site, l'integration se fait avec une simple ligne, de même que la possibilité de faire des miniatures, et autre. Les mises à jours sont gérées de leur coté, donc il est compliqué de faire plus simple.

Efficacité:

Quand l'image est en taille réduite, le menu apparait vite, disparait vite, et il est très clair. Le clic droit permet de choisir si l'on veut regarder l'image grace au HTML5 ou grace au player d'Adobe. Du très bon. Le point négatif majeur (outre son aspect payant, bien sur) est le menu en mode plein écran, qui met pres de 10 secondes à disparaitre. Très long, trop long.

Graphisme:

Très simple, très classique, mais ça fonctionne. Je n'ai pas vu de possibiliter pour skinner le player, par contre.

VideoJS

videojs

Ce player est mon petit chouchou. C'est simple, il a tout pour plaire! Il est open source, en plus.

Simplicité:

Deux lignes à coller en header, un bloc à coller là où l'on veux intégrer l'image. Ce n'est pas bien moins que OSM, mais c'est toujours moins.

Efficacité:

Les menus disparaissent et apparaissent instantanément, qu'on soit en plein écran ou non. Lecture en flash si le navigateur ne supporte pas le HTML5. Il se charge presque instantanément. Bref, absolument rien à redire

Graphisme:

Tout est skinnable simplement en css, donc je ne vais pas m'apesantir là dessus.

OSM

open standard media

Open Standard Media (OSM) est une solution de gestion de vidéos open source et gratuite très complète. Ce player permet de gérer plusieurs vidéos avec un seul player, ce qui est sympathique.

Simplicité:

L'intégration à l'air simple mais fastidieuse. De nombreuses choses à copier coller à de nombreux endroits. Rien de bien compliqué tout de même, je vous rassure.

Efficacité:

Il y a beaucoup trop de boutons! Bon au deuxième coup d'oeil, on relativise : ils servent (presque) tous. Mais l'agencement et le faut qu'ils ne disparaissent pas donne cette impression de fouilli. Les miniatures, sur le coté, sont pratiques, mais il aurait fallu, là aussi, un moyen de fermer ce volet.

Graphisme:

Tout en dégradé de gris, l'interface est loin d'être renversante de beauté.

Flare vidéo

flarevideo

Ce lecteur est basé sur le framework jQuery.

Simplicité:

Très simple à intégrer. Quelques CSS à charger, un petit script à ajouter dans la page à l'endroit ou l'on veut la vidéo, et voilà.

Efficacité:

Les menu sont clairs, (bien que le skin par défaut soit vraiment épais). Comme d'habitude, il y a un fallback vers flash en cas de non-support du HTML5.

Graphisme:

Skinable, même si je trouve les skin moins "propres" que videojs.

 

Pour conclure, on peut remarquer que deux players sortent clairement du lot: Videojs et sublimevideo, le premier fournissant un travail aussi bon en étant gratuit, mais demandant un tout petit peu plus d'intégration et de maintenance.

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte

5Commentaires

  • Avatar_thumb
    Kult'ur

    le 03/05/2011 | #1

    Vos topic sur les videos sous html5 sont vraiment top, pourriez vous faire des explications sur les différents "codecs" utilisé .?... ( h264 etc....)

    continuez comme ca c'est top !!!

  • Avatar_thumb
    ad

    le 03/05/2011 | #2

    Bien d'accord, VideoJS est super, vraiment simple à mettre en place ! Et le total skin CSS est bien pratique. Je le note dans un coin ;)

  • Avatar_thumb
    famavolat

    le 03/06/2011 | #3

    Super synthèse ! Pour le coup, j'ai choisi d'installer le plugin Wordpress de VideoJS. C'est léger, rapide et simple. Mais comme j'ai un intellect d'entrée d'gamme, je n'ai toujours pas compris comment utiliser le skin "vim" qui me plaisait bien... si quelqu'un peut éclairer une douille comme moi, d'avance merci.

  • Avatar_thumb
    Nom

    le 09/04/2012 | #4

    Beau travail merci BCP !

  • Avatar_thumb
    buzzy video

    le 18/06/2013 | #5

    moi j'ai toujours utilisé JW Player qui est compatible html quand c'est nécessaire. Je suis content de découvrir Frare video et videoJS

Ecrire un commentaire

captcha

Ouvrir