oujood.com

HTML5 afficher des vidéos sur le Web

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>
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 : la balise <video>.

chercher |

Que fait la balise HTML <video> ?

L'élément <video>, par lequel on ajoute la prise en charge native de la lecture vidéo à la spécification HTML en HTML5, peut être utilisé pour intégrer une vidéo dans un document HTML. Ajoutez l'URL de la vidéo à l'élément en utilisant l'attribut src de l'élément <video> ou en imbriquant un ou plusieurs éléments <source> entre les balises <video> ouvrante et fermante.

L'élément vidéo a été ajouté à HTML5 en même temps que son frère, l'élément audio. L'élément vidéo est utilisé pour ajouter une vidéo à une page Web. La vidéo est identifiée en ajoutant une URL à un attribut src. Vous pouvez l'utiliser pour intégrer des vidéos hébergées sur votre propre compte d'hébergement ou hébergées par un site Web externe.

HTML5 vidéo sur le Web

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

Exemple :       Copier 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

Exemple :       Copier 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 - mis à jour le 20 janvier 2022
chapitre précédent   sommaire    chapitre suivant




Voir aussi nos tutoriel :

glisser et déplacer

Glisser et Déplacer

fonction strcasecmp

Comparaison insensible la casse de chaînes binaires

Balise option

Définit une option dans une liste déroulante