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 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"/>

Essayez-le 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"/>

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 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> permet 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éo différents ont été utilisés. L'élément <video> HTML 5 essaie de jouer avec 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

La manière la plus simple d'afficher une vidéo en HTML est d'utiliser des sites de vidéo comme Youku.

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

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

Exemple

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

Essayez-le vous-même

Remarque 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 désactivé 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, le site s'ouvre ensuite et la vidéo est jouée.

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.