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

Tout savoir sur la balise video du HTML5 #1

par Benjamin SANCHEZle 26/04/2011

Pour tout savoir sur la balise vidéo du HTML5, voici le premier d'une série d'article traitant de l'histoire, le fonctionnement, et les façons d'intégrer la balise Vidéo dans vos sites web.

Cet article est le premier d'un dossier qui traitera de la balise vidéo du HTML5 : histoire, intégration, solutions toutes faites... à la fin de ce dossier, la balise vidéo n’aura plus de secret pour vous !

La balise vidéo du HTML5 : Présentation

La balise vidéo HTML5 est un moyen de lire de la vidéo sur internet. Bon, ok, dis comme ça, et depuis le temps qu'existe Youtube, ce n'est pas très révolutionnaire... Mais cette balise vidéo permet de le faire de manière native, sans s'encombrer de plugins comme flash ou silverlight, avec les langages standards du Web : HTML, CSS , Javascript.

Exemple d'intégration d'une vidéo avec l'HTML5
<video  controls  src= "video.ogv" > Le texte alternatif </video>

Vidéo d'exemple du site du W3C

 

La fin du rêve : La guerre des codecs

Le W3C, avec leur idée d'intégrer une balise standard pour intégrer les vidéos sur le net, étaient les grands sauveurs de la vidéo : Plus besoin de plugins propriétaires, plus de complications, tout le monde fait la même chose, et voilà. Mais, car il y a un mais, le W3C n'a pas statué sur le codec qui devait être utilisé. Résultat : chacun avait son avis, son codec préféré, qu'il voulait intégrer dans son navigateur, et ne voulait pas intégrer ceux des autres pour divers raisons.

Les différents camps :

Le H.264 dans un coin, avec Apple, Microsoft, IE et Google.

h264

Ce codec est le meilleur en terme purement technique. Rapide et assez léger, il n'a que deux soucis : Il n'est pas libre, ce qui peut heurter l'idéologie de certains (la fondation mozilla, pour ne citer qu'eux.), et... il coute 5 millions de dollars. Par an, bien sur. Ah bah oui, mon bon monsieur, mais faut savoir ce qu'on veut, dans la vie, hein.

La présence de Google, surtout, fait trembler : Google, c'est Youtube. Et Youtube, c'est LE site de vidéo sur le net. Si un navigateur perd la compatibilité Youtube, il risque ni plus ni moins que la mort.

Le Théora, avec opera et firefox


Le OGG Théora est un codec libre, et rien que pour ça, à plus sa place dans des spécifications W3C qu'une solution propriétaire. Il est néanmoins bien plus lourd, et les vidéos sont très encombrante sur le serveur.

Mozilla ne veut tout de même pas quitter sa ligne de conduite favorisant le libre, considérant que si le H.264 devenait standard, il serait pratiquement impossible à un nouvel acteur de faire un navigateur (5 million, faut déjà des reins...).

---

Si cette situation était restée en l'état, une vidéo aurait du être hébergé dans de multiples formats pour être lue par tout le monde, alors que le plugin flash suffisait pour tout les navigateurs. Déjà la fin du règne de la balise Vidéo ? C'était sans compter un revirement de situation : Google libère les droits du VP8 (un autre codec), et s'associe à Mozilla et Opera pour sortir WebM, un format libre et compétitif. Microsoft annonce ensuite assez rapidement le support de ce format par IE9, et voilà, le débat n'a plus raison d'être... sauf pour Apple, qui trouve que ce codec est moins bon que le H.264.


Alors, oui, pour quelqu'un qui a dit qu'il ne supporterait pas le flash car il ne veut plus de solution propriétaire sur le net, c'est quand même assez contradictoire, mais bon, l'argent a des raisons que la raison ignore.

À l'heure actuelle, où en est-on?

Maintenant, la balise vidéo est déjà utilisable avec le codec Théora, supporté par tous les navigateurs récents, et dès les prochaines versions il sera possible d'utiliser le format webM de partout, sauf avec Apple. Pour ceux qui pensaient que le HTML5 permettrait de lire les vidéos youtube,  mes condoléances...

Pour ceux qui sont interessés par un tableau montrant quelles versions des différents navigateurs supportent les différents codecs, c'est par ici.

Mais comment l'utiliser ? Et au delà d'intégrer une vidéo toute simple avec la balise, comment ajouter plus de boutons de contrôle, et plus de fonctionnalités ? C'est ce que nous verrons dans notre prochain article !

  • 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

6Commentaires

  • Avatar_thumb
    Jeff BOCQUILLON

    le 27/04/2011 | #1

    Bon article, ça fait plaisir qu'on traite enfin plus à fond du html5.

    • Avatar_thumb
      sylvain

      le 27/04/2011 | #2

      Merci pour l'article, au top comme toujours, j'attends la suite!

    • Avatar_thumb
      tadalafil

      le 28/04/2011 | #3

      Merci beaucoup pour tout ce travail d'information!

    • Avatar_thumb
      jerome

      le 28/04/2011 | #4

      merci pour ce recapitulatif, malheureusement le manque de compatibilite ne permet pas encore de proposer la balise video pour des sites grand public

    • Avatar_thumb
      buzzy video

      le 18/06/2013 | #5

      yes, j'avais loupé cette article sur les vidéo html5 mais je suis bien content de l'avoir retrouvé, le point sur les codecs est très interessant.

    • Avatar_thumb
      Tadalis

      le 02/07/2013 | #6

      Merci pour l'échantillon, il m'aident

    Ecrire un commentaire

    captcha

    Ouvrir