Balise video de HTML5, comment l'insérer (le 26 juillet 2010)

Curiosité assez cocasse : il fallait, aux temps reculés ou Flash était tout puissant passer par la balise object pour insérer du flash proprement, des vidéos notamment.

Avec HTML5, même si le principe est sensiblement le même, il y a quelques changements.

Reprenons donc l'exemple d'utilisation de la balise video de HTML5. Je le complète avec le format WebM.


<video width="400" height="222" controls="controls">
<source src="/animations/Rings.mp4" type="video/mp4" />
<source src="/animations/Rings.webm" type="video/webm" />
<source src="/animations/Rings.ogv" type="video/ogg" />
 Ici le texte alternatif !
</video>

Donc, la première source indique la version mp4 de l'animation (et c'est obligatoire pour l'Ipad que la version mp4 soit en tête de liste...).
La seconde source indique la vidéo au format WebM et la troisième indique la vidéo au format Ogg. Les navigateurs ne pouvant pas lire le mp4 ni la version WebM nativement (comme Firefox 3.6) prendront la version au format ogg.
Particularité de la syntaxe XHTML : il faut ajouter controls="controls" (et pas juste controls comme vous pourrez le voir sur certains exemples) pour avoir les possibilités de contrôle de la vidéo.

Donc, à partir de cet exemple, on peut toucher tous les navigateurs modernes (ainsi que l'iPad et l'iPhone). C'est-à-dire tous les principaux acteurs (Opéra, Chrome, Firefox, Safari)... sauf Internet Explorer.

Pour ce dernier, il faut insérer à la place de "Ici le texte alternatif !" une façon de lire la vidéo. Dans mon exemple, j'ai pris le player Youtube.

Problème, Internet Explorer 6 le mal nommé nécessite la balise embed qui est donnée... qui n'est absolument pas valide. En ajoutant un commentaire conditionnel pour cacher le code incriminé, on arrive à avoir un code totalement valide.


<video width="400" height="222" controls="controls">
<source src="/animations/Rings.mp4" type="video/mp4" />
<source src="/animations/Rings.webm" type="video/webm" />
<source src="/animations/Rings.ogv" type="video/ogg" />
<object type="application/x-shockwave-flash" 
   width="400" height="222" 
   data="https://www.youtube.com/v/JqkAt_s3HSE">
 <param name="movie" 
 value="https://www.youtube.com/v/JqkAt_s3HSE" />
 <param name="wmode" value="transparent" />
<!--[if lte IE 6 ]>
<embed 
  src="https://www.youtube.com/v/JqkAt_s3HSE"
  type="application/x-shockwave-flash" 
  allowscriptaccess="always" allowfullscreen="true" 
  width="400" height="222">
</embed>
<![endif]--> 
Vous n'avez pas de navigateur moderne, 
ni flash d'installé sur Internet Explorer... 
suivez les liens ci-dessous pour télécharger les vidéos.
</object>
</video>

Au final, on a une solution compatible sur tous les navigateurs :

les modernes lisent la vidéo nativement (même ceux qui sont allergiques à Flash comme l'iPad),
les moins modernes ont l'alternative de la balise video, donc le plugin flash pour lire la vidéo,
et les vieux tromblons ont l'alternative du flash, donc le message explicatif.

Le tout est valide, et plutôt simple à implémenter.

Permalien : https://www.nicolas-hoffmann.net/source/1302-Balise-video-de-HTML5-comment-l-inserer.html

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1302

9 commentaires

Posté par Alf le 26/07/2010 à 19:21:20

Il faudrait que quelqu'un se décide à dire à Billou qui IE, c'est du caca... Et que soit il arrête de polluer ses Windows avec ça (ils le sont déjà bien assez avec d'autres logiciels/scripts embarqués), soit il se sort les doigts et nous pond enfin un navigateur qui tient la route...

Posté par Nico le 27/07/2010 à 18:53:14

Tu exagères, si on n'avait pas IE6, le métier de développeur/intégrateur web serait d'un plat... tandis que là, on sait qu'il va y avoir des problèmes complètement irrationnels à résoudre :
-fixer une largeur pour faire apparaître un élément,
-mettre des propriétés farfelues pour résoudre des bugs proprement surprenants et incongrus, etc.

Le tout s'envisage avec une approche quasi-shamanique là où le métier devrait être bassement scientifique et rigoureux.

En fait, IE, c'est un peu la dose de paranormal de l'intégrateur web.

Posté par Alf le 29/07/2010 à 12:17:21

Lol ! C'est pas faux... Mais quelle prise de tête, parfois !

Pas plus tard qu'il y a pas longtemps, je me suis rendu compte que l'interprétation de la balise <hr /> sous IE 8 n'était pas la même que sous IE 7 et inférieurs... C'est déjà pas simple de prendre en compte les particularités de IE, mais en plus, ils changent des trucs qui marchaient déjà bien d'une version à une autre ! Alors pour s'en sortir sans mal de tête, c'est pas évident !

Posté par Olivier G. le 30/07/2010 à 9:22:11

Pourquoi est-ce que tu as un « </object> » dans le premier bout de code ?

Posté par Nico le 30/07/2010 à 23:50:39

Olivier> parce que je devais être fatigué ! Il n'a pas lieu d'être là, merci de me le faire remarquer, c'est corrigé.

Posté par Geoffrey le 16/08/2010 à 10:39:47

Mais oui, simple et efficace en effet ^^

Au final on en est quand même au stade ou on propose une solution et trois alternatives (en considérant la solution textuelle comme une alternative).
Avant on s'en contentait de 2 (d'alternatives).

Les choses évoluent, mais pas assez rapidement.
Quand les options 3D vont venir s'ajouter à tout cela ou va se retrouver avec 4 alternatives ! lol

J'adore cette phrase : "En fait, IE, c'est un peu la dose de paranormal de l'intégrateur web."
Bien qu'il y ait de nombreux bogues déjà expliqués, je suis assez d'accord, on en découvre tous les jours de nouveaux plus originaux que les précédents :p

Posté par Nico le 16/08/2010 à 13:48:35

Geoffrey : l'avantage maintenant, c'est qu'on arrive à s'y retrouver dans les bugs d'IE.

Pas plus tard qu'il y a pas longtemps, j'avais une marge entre deux blocs qui déconnait sous IE 8 (mais pas le 7). Le plus drôle, c'est que quand je survolais la liste de liens au-dessus, ça redevenait normal. Le truc improbable, impossible, mais pourtant, c'est le cas.

Bref, une histoire de haslayout à la noix, mais franchement, si tu ne connais pas ce phénomène et surtout comment le fixer, tu peux chercher 3 jours ! $%-\$

Posté par un courageux anonyme le 24/12/2014 à 0:30:14

jene comprend pas apropos de navigateur dans le bloc note le video ne peu pas affiche?

Posté par Yannick le 28/08/2018 à 12:11:52

Bonjour à tous, comment peut-on intégrer une vidéo logée sur Youtube dans un e-mailing HTML5 s'il vous plait compatible avec ces messageries ?
J'ai essayé de mettre le lien d'intégration dans différentes balises comme <video>, <iframe>, <object> ou encore <embed> mais sans succès, quelqu'un aurait une idée ?

Merci beaucoup

Balise video de HTML5, comment l'insérer

Balise video de HTML5, comment l'insérer (le 26 juillet 2010)

9 commentaires

Ajouter un commentaire