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- Attributs Video

Comme tous les autres éléments, l'élément <video> 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

autoplay

Cet attribut est de type boolean. S'il apparaît dans l'élément vidéo <video>, il sera lu automatiquement dès que possible (après avoir téléchargé suffisamment de données pour être lu).
    <h3>autoplay attribute</h3>

    <video width="320" height="240" autoplay 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>
  • Remarque : Pour désactiver la fonction de lecture automatique de <video>, vous devez supprimer l'attribut autoplay. Le réglage autoplay="false" peut être invalide.
  • Plusieurs navigateurs (comme Chrome 70.0) ne peuvent pas jouer automatiquement si le <video> possède l'attribut muted.

controls

Si cet attribut est présent, le navigateur offrira des commandes permettant à l'utilisateur de contrôler la lecture (playback) de la vidéo, y compris le volume, la recherche (seeking), la pause / reprise de la lecture (resume playback), le téléchargement,...
<h3>Video with controls:</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>

<h3>Video without controls:</h3>

<video width="320" height="240">
  <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>
Les deux images ci-dessous montrent la différence entre l'attribut <video> avec l'attribut controls et l'attribut <video> sans  controls :

duration

L'attribut  duration renvoie un numéro (type de données  double), qui indique la durée de la vidéo en millisecondes. Si la vidéo n'a pas de source ou si la source est invalide, elle renvoie NaN (Not a Number). De plus, si la source ne peut pas déterminer l'heure de fin, elle renvoie +Infinite, comme les vidéos en direct (live stream video).

duration-attr-example.html
<!DOCTYPE html>
<html>

<head>
    <title>Video</title>
    <meta charset="UTF-8">
    <script>
        function showDuration()  {
           var videoElement = document.getElementById("myVideo");

           alert("Duration: " + videoElement.duration +" Milliseconds!");
        }
    </script>
</head>
<body>
    <h3>Video duration attribute:</h3>

    <video id="myVideo" 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>

    <br/>
    <button onclick="showDuration()">Duration?</button>

</body>
</html>

width/height

L'attribut  width/height permet de spécifier la largeur et la hauteur de la zone d'affichage vidéo, qui est un nombre absolu (le pourcentage (%) n'est pas supporté).

loop

L'attribut est de type boolean. S'il apparaît dans l'élément <video>, la vidéo sera lue au début de la vidéo quand elle atteindra la fin.
loop-attr-example.html
<video width="320" height="240" loop 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>

muted

L'attribut  muted est du type  boolean, s'il apparaît dans l'élément <video>, la vidéo sera initialisée avec l'état d'inhibition audio. Sa valeur par défaut est false.
muted-attr-example.html
<video width="320" height="240" muted 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>

poster

L'attribut  poster vous permet de spécifier une URL pour une image à afficher initialement lorsque la vidéo n'a pas encore commencé à être lue.
<video width="320" height="240" poster ="poster.png" 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>

preload

Cet attribut fournit au navigateur une suggestion de choses à faire pour offrir aux utilisateurs la meilleure expérience possible. Ses valeurs possibles sont :
Valeur Description
none Recommander au navigateur de ne pas précharger la vidéo. Cela signifie que lorsque l'utilisateur clique sur le bouton "Start", le navigateur commence à télécharger le contenu vidéo.
metadata Recommander le navigateur pour récupérer les métadonnées (metadata) de la vidéo, telles que la longueur, la taille, etc.
auto Recommander au navigateur de télécharger le contenu de la vidéo, même si l'utilisateur ne s'y attend pas.
"empty string" Si vous fournissez une valeur vide pour l'attribut preload, il fonctionnera comme la valeur auto.
La valeur par défaut du  preload se distingue pour différents navigateurs. La spécification HTML5 recommande aux navigateurs d'utiliser "metadata" comme valeur par défaut.
Remarque : L'attribut  preload n'est qu'une suggestion pour le navigateur. Il est possible que le navigateur ne suive pas cette suggestion. Par exemple, si <video> possède l'attribut autoplay=true, le contenu vidéo sera automatiquement téléchargé par le navigateur.

playsinline

Les écrans des appareils Android ou iOS sont assez petits, donc lorsque vous regardez des vidéos sur le navigateur de ces appareils, il va automatiquement lire les vidéos en plein écran (Fullscreen). L'attribut playsinline est du boolean, ce qui aide à empêcher le navigateur d'effectuer les comportements ci-dessus.
<video width="320" height="240" playsinline 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>

View more Tutorials: