Vidéo HTML

Il y a de nombreuses méthodes pour jouer une vidéo en HTML.

Exemple

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Essayez-le vous-même

Problèmes, problèmes et solutions

Il n'est pas facile de jouer une vidéo en HTML !

Vous devez maîtriser de nombreuses techniques pour vous assurer que vos fichiers vidéo peuvent être joués dans tous les navigateurs (Internet Explorer, Chrome, Firefox, Safari, Opera) et sur tous les appareils (PC, Mac, iPad, iPhone).

Dans ce chapitre, CodeW3C.com vous résume les problèmes et les solutions.

Utiliser le tag <embed>

Le tag <embed> a pour fonction d'intégrer des éléments multimédias dans une page HTML.

Le code HTML suivant montre une vidéo Flash intégrée dans une page web :

Exemple

<embed src="movie.swf" height="200" width="200"/>

Essayez-le vous-même

Problème

  • HTML4 ne peut pas reconnaître le tag <embed>. Votre page ne peut pas être validée.
  • Si le navigateur ne prend pas en charge Flash, la vidéo ne peut pas être jouée
  • iPad et iPhone ne peuvent pas afficher les vidéos Flash.
  • Si vous convertissez la vidéo en un autre format, elle ne peut pas toujours être jouée dans tous les navigateurs.

Utiliser le tag <object>

Le tag <object> a pour fonction d'intégrer des éléments multimédias dans une page HTML.

Le fragment HTML suivant montre une vidéo Flash intégrée dans une page web :

Exemple

<object data="movie.swf" height="200" width="200"/>

Essayez-le vous-même

Problème

  • Si le navigateur ne prend pas en charge Flash, la vidéo ne peut pas être jouée.
  • iPad et iPhone ne peuvent pas afficher les vidéos Flash.
  • Si vous convertissez la vidéo en un autre format, elle ne peut pas toujours être jouée dans tous les navigateurs.

Utiliser le tag <video>

Le <video> est un nouveau tag dans HTML 5.

L'élément <video> a pour fonction d'intégrer des éléments vidéo dans une page HTML.

Le fragment HTML suivant affichera une vidéo intégrée au format ogg, mp4 ou webm :

Exemple

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Votre navigateur ne prend pas en charge la balise vidéo.
</video>

Essayez-le vous-même

Problème

  • Vous devez convertir la vidéo en de nombreux formats différents.
  • L'élément <video> est inefficace dans les navigateurs anciens.
  • L'élément <video> ne peut pas être validé en HTML 4 et XHTML.

La meilleure solution HTML

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Essayez-le vous-même

Dans l'exemple précédent, 4 formats de vidéos différents ont été utilisés. L'élément <video> HTML 5 essaie de jouer une vidéo au format mp4, ogg ou webm. Si tous échouent, il recule à l'élément <embed>.

Problème

  • Vous devez convertir la vidéo en de nombreux formats différents
  • L'élément <video> ne peut pas être validé en HTML 4 et XHTML.
  • L'élément <embed> ne peut pas être validé en HTML 4 et XHTML.

Remarque :Utilisez <!DOCTYPE html> (HTML5) pour résoudre les problèmes de validation.

Solution Youku

Le moyen le plus simple d'afficher une vidéo en HTML est d'utiliser des sites de vidéos tels que Youku.

Si vous souhaitez diffuser une vidéo sur une page web, vous pouvez la télécharger sur des sites de vidéos tels que Youku, puis insérer le code HTML sur votre page pour jouer la vidéo :

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

Essayez-le vous-même

Utilisation des liens

Si une page web contient des liens vers des fichiers multimédias, la plupart des navigateurs utiliseront une application d'assistance pour lire les fichiers.

Le fragment de code suivant montre un lien vers un fichier AVI. Si l'utilisateur clique sur ce lien, le navigateur lance une application d'assistance, par exemple Windows Media Player, pour lire ce fichier AVI :

Exemple

<a href="movie.swf">Lancer un fichier vidéo</a>

Essayez-le vous-même

Commentaire sur la vidéo en ligne

Lorsque une vidéo est incluse dans une page web, elle est appelée vidéo en ligne.

Si vous envisagez d'utiliser des vidéos en ligne dans une application web, vous devez être conscient que beaucoup de gens trouvent les vidéos en ligne irritantes.

En même temps, veuillez noter que l'utilisateur peut déjà avoir fermé l'option de vidéo en ligne dans le navigateur.

Notre meilleur conseil est de ne les inclure que lorsque l'utilisateur souhaite voir une vidéo en ligne. Un exemple positif est, lorsque l'utilisateur doit voir une vidéo et cliquer sur un lien, l'ouverture de la page puis la lecture de la vidéo.

Balises multimédias HTML 4.01

Balise Description
<applet> Non recommandé.Définir l'applet intégré.
<embed> Non recommandé.Définir l'objet intégré (autorisé dans HTML5).
<object> Définir l'objet intégré.
<param> Définir les paramètres de l'objet.

Balises multimédias HTML 5

Balise Description
<video> La balise définit des sons, par exemple de la musique ou d'autres flux audio.
<embed> Les balises définissent le contenu intégré, par exemple les plugins.