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>

Essayer vous-même

Problèmes, problèmes et solutions

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

Vous devez maitriser 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 matériels (PC, Mac, iPad, iPhone).

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

Utiliser la balise <embed>

Le rôle de la balise <embed> est 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"/>

Essayer vous-même

Problème

  • HTML4 ne peut pas reconnaître la balise <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 dans un autre format, elle ne peut pas être jouée dans tous les navigateurs.

Utiliser la balise <object>

Le rôle de la balise <object> est 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"/>

Essayer 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 dans un autre format, elle ne peut pas être jouée dans tous les navigateurs.

Utiliser la balise <video>

Le <video> est un nouveau balise 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>

Essayer vous-même

Problème

  • Vous devez convertir la vidéo en de nombreux formats différents.
  • L'élément <video> n'est pas valide 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>

Essayer vous-même

Dans l'exemple précédent, 4 formats de vidéo différents ont été utilisés. L'élément <video> HTML 5 essaie de lire la vidéo dans un 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éo comme Youku.

Si vous souhaitez lire une vidéo sur une page web, vous pouvez la télécharger sur des sites de vidéo comme Youku et insérer le code HTML dans votre page pour lire 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>

Essayer 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>

Essayer 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 et 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.