HTML5 afficher des vidéos sur le Web

Beaucoup de sites Web modernes affichent des vidéos Aujourd’hui HTML5 fournit une norme pour afficher des vidéos.
Jusqu'à présent, il n’y avait pas de norme pour montrer une vidéo sur une page web.
La plupart des vidéos sont affichées au moyen d'un plug-in (comme flash). Toutefois, différents navigateurs peuvent avoir différents plug-ins.
HTML5 définit un nouvel élément qui spécifie un moyen standard pour intégrer une vidéo dans une page Web : l'élément <video>.

HTML5 vidéo sur le Web

HTML5 cours tutorial

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge l'élément <video>.

Remarque : Internet Explorer 8 et versions antérieures, ne supportent pas l'élément <video>.


Formats vidéo et Support de navigateurs

Actuellement, il existe 3 formats vidéo pris en charge pour l'élément <video> : MP4, WebM et Ogg :

Navigateur

MP4

WebM

OGG

Internet Explorer 9

OUI

NON

NON

Firefox 4.0

NON

OUI

OUI

Google Chrome 6

OUI

OUI

OUI

Apple Safari 5

OUI

NON

NON

Opéra 10.6

NON

OUI

OUI

  • MP4 = les fichiers MPEG 4 H264 codec vidéo et le codec audio AAC
  • WebM = les fichiers avec le codec vidéo VP8 et Vorbis audio codec WebM
  • OGG = les fichiers avec le codec vidéo Theora et Vorbis codec audio Ogg

Le tableau montre qu’aucun des navigateurs ne prend en charge les trois formats pour le moment


HTML5 Vidéo - Comment ça marche

Pour afficher une vidéo en HTML5, tout ce dont vous avez besoin est le code suivant :

<video width="320" height="240" controls="controls">
  <source src="maVideo" type="Type">
</video>

Exemple

Sélectionner le code

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

L'attribut contrôle ajoute des contrôles vidéo, tels que lecture, pause et volume.

C'est aussi une bonne idée de toujours inclure des attributs width et height. Si la hauteur et la largeur sont définies, l'espace requis pour la vidéo est réservé lorsque la page est chargée. Cependant, sans ces attributs, le navigateur ne connaît pas la taille de la vidéo et ne peut pas réserver l'espace approprié pour elle. L'effet sera que la mise en page va changer pendant le chargement (lors de la charge de la vidéo).

Vous devez également insérer un contenu textuel entre les balises <video> et </video> pour les navigateurs qui ne prennent pas en charge l'élément <video>.

Vous pouvez placer plusieurs éléments <source> dans l’élément <video>. Le navigateur utilise le premier format qu’il reconnu.


HTML5 <video> - propriétés et méthodes du DOM

Le DOM HTML5 a des méthodes, propriétés et événements pour les éléments <video> et <audio>.

Ces méthodes, propriétés et événements permettent de manipuler les éléments <video> et <audio> à l'aide de JavaScript.

Il existe des méthodes pour jouer (Play),  pause et le chargement, par exemple et il y a les propriétés (comme la durée et le volume). Il y a aussi des événements DOM qui peuvent vous informer lorsque l’élément <video> commence à s’exécuter, interrompue, se termine, etc..

L'exemple ci-dessous illustrent, de façon simple, comment aborder un élément <video>, lire et définir des propriétés et appeler des méthodes.

Exemple 1

Sélectionner le code

              <!DOCTYPE html>
              <html>
              <head>
                <meta http-equiv="X-UA-Compatible" content="IE=9"/>
                <title>HTML5 vidéo</title>
              </head>
              <body>
              <div style="text-align:center">
                <button onclick="playPause()">Play/Pause</button>
                <button onclick="makeBig()">Big</button>
                <button onclick="makeSmall()">Small</button>
                <button onclick="makeNormal()">Normal</button>
                <br>
                <video id="video1" width="420">
                <source src="mov_bbb.mp4" type="video/mp4">
              <source src="mov_bbb.ogg" type="video/ogg">
              Votre explorateur ne supporte pas vidéo HTML5.
                </video>
              </div>
              <script>
              var myVideo=document.getElementById("video1");
              function playPause()
              {
              if (myVideo.paused)
                myVideo.play();
              else
                myVideo.pause();
              }
              function makeBig()
              {
              myVideo.width=560;
              }
              function makeSmall()
              {
              myVideo.width=320;
              }
              function makeNormal()
              {
              myVideo.width=420;
              }
              </script>
              <p>Vidéo de <a href="http://www.bigbuckbunny.org/"
              target="_blank">Big Buck Bunny</a>.</p>
              </body>
              </html>
           

L'exemple précédent appelle deux méthodes : play() et pause(). Il utilise également deux propriétés : pause et la largeur.

Pour plus de détail voir notre Référence HTML5 Audio/vidéo.


HTML5 Tags vidéo

Balise

Description

<video>

Définit une vidéo ou un film

<source>

Définit plusieurs ressources de support pour les éléments multimédias, tels que <video> et <audio>

<track>

Définit les textes des titres dans mediaplayer

Par carabde 10 juin 2014

chapitre précédent

sommaire

chapitre suivant