Table des matières

Le Tutoriel de HTML Video

View more Tutorials:

1- HTML Video

L'étiquette  <video> est incluse dans HTML5, qui vous aide à intégrer une vidéo dans une page Web. HTML4 n'a pas d'étiquette spécifique pour les vidéos. Pour cette raison, pour intégrer des vidéos, HTML4 utilise des balises <embed> ou <object> ou <iframe> et vous devez installer des logiciels supplémentaires sur le navigateur tels que Flash ou QuickTime.
Avec l'étiquette  <video> l'intégration d'une vidéo sur le site Web est plus simple et vous n'avez pas besoin d'installer de logiciel supplémentaire sur le navigateur. La plupart des navigateurs ont déjà supporté HTML5, donc il supporte aussi l'étiquette <video>.
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">

  Your browser does not support the video tag.

</video>
L'attribut  controls indique au navigateur d'afficher les contrôles pour les vidéos telles que le bouton play, le bouton pause, le volume, etc.
L'étiquette  <source> qui apparaît dans l'étiquette <video> fournit une source vidéo alternative pour le navigateur. Le navigateur peut utiliser l'une des sources vidéo indiquées, de haut en bas.
Le contenu textuel de l'étiquette  <video> n'est affiché que si le navigateur ne supporte pas l'étiquette <video> ou tout format vidéo fourni par les étiquettes <source>.
video-example.html
<!DOCTYPE html>
<html>

<head>
    <title>Video</title>
    <meta charset="UTF-8">
</head>
<body>
    <h3>Video example:</h3>

    <video width="320" height="240" controls>
      <source src="../resources/mov_bbb.mp4" type="video/mp4">
      <source src="../resources/mov_bbb.ogg" type="video/ogg">

      Your browser does not support the video or formats.

    </video>

</body>
</html>
Voici quelques navigateurs et les formats vidéo supportés :
Browser MP4
(video/mp4)
WebM
(video/webm)
Ogg
(video/ogg)
Internet Explorer 16x16    
Chrome 16x16 16x16 16x16
Firefox 16x16 16x16 16x16
Safari 16x16    
Opera 16x16
(>= 25)
16x16 16x16

2- Video Attributes

Comme tous les autres éléments, l'élément <vidéo> soutient tous les attributs globaux (global attributes).
  • TODO Link!
En outre, il a d'autres attributs comme suit :
  • src
  • controls
  • autoplay
  • buffered
  • crossorigin
  • currentTime
  • duration (Read only)
  • height
  • width
  • loop
  • muted
  • playsinline
  • poster
  • preload

View more Tutorials: