Comment Insérer un Vidéo dans HTML

Il existe plusieurs manières d’insérer un vidéo dans votre site Web. Les balises <embed>, <frame> et <object> ont été utilisées pour insérer des vidéos dans un document HTML. Puisque les balises mentionnées ci-dessus sont obsolètes, nous considérerons les balises <video> et <iframe> utilisées.

Utiliser la balise <video> pour insérer un vidéo dans HTML

La balise <video> est ajoutée dans HTML5 avec son frère, <audio>. Avant la sortie de HTML5, une vidéo ne pouvait être lue que dans un navigateur doté d'un plug-in (de type flash). L’élément de HTML5 <video> spécifie un moyen standard d’intégrer un vidéo dans une page Web. C'est-à-dire que la vidéo est identifiée en ajoutant une URL de vidéo à un attribut source et que l'on peut l'utiliser pour incorporer des vidéos importées de l'ordinateur ou hébergées sur un site Web externe.

Pour une utilisation de base, tout ce que nous avons besoin de faire dans un document HTML consiste à ajouter l'URL de la vidéo à l'élément en utilisant l'élément <source> pour identifier l'URL de la vidéo et à ajouter l'attribut control afin que les visiteurs du site Web puissent contrôler les options vidéo. Il est également important d'utiliser les attributs width et height pour définir la taille de la vidéo. Voyons un exemple simple:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <video width="320" height="240" controls>
      <source src=”http://techslides.com/demos/sample-videos/small.ogv” type=video/ogg> <source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
    </video>
    <p>
      Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et
      l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique, demeurant essentiellement inchangé.
    </p>
  </body>
</html>

Au minimum, pour utiliser l'élément video, les attributs suivants doivent être utilisés:

  • src: définit l’URL, où le contenu vidéo est hébergé
  • type: définit le format de fichier
  • controls: doit être spécifié ou aucun élément visuel n'apparaîtra pour contrôler la lecture du contenu

De plus, il y a beaucoup d’attributs optionnels, qui peuvent être utilisés pour influencer la façon dont le contenu vidéo est chargé. Ces attributs comprennent:

  • autoplay: spécifie que la vidéo commencera à jouer dès qu'elle sera prête
  • loop: spécifie que la vidéo va recommencer à chaque fois qu'elle est terminée
  • poster: sélectionne une image à afficher comme affiche pour la vidéo jusqu'à ce que la lecture commence
  • preload: explique comment l'auteur pense que la vidéo doit être chargée lors du chargement de la page
Un autre point important à retenir est que l'élément <video> est pris en charge par tous les navigateurs modernes.

Actuellement, la balise de HTML5 <video> supporte 3 types de fichiers vidéos:

Format MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

Comment configurer Video Autoplay

Pour configurer la lecture automatique de vidéo, on doit ajouter l’attribut autoplay pour la balise <video> comme cela: 

<video width="320" height="240" autoplay>
Définissez autoplay controls dans le cas où vous souhaitez activer l'option "controls" pour la vidéo en lecture automatique.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <video width="320" height="240" controls autoplay>
      <source src=”http://techslides.com/demos/sample-videos/small.ogv” type=video/ogg> <source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
    </video>
    <p><b>Note:</b> L’attribut autoplay n’exécutera pas sur quelques appareils mobiles.</p>
  </body>
</html>

Insérer des vidéos de Youtube en utilisant la balise <iframe>

Le moyen le plus simple de lire des vidéos en HTML consiste à utiliser YouTube comme source.

Vous devez d’abord télécharger la vidéo sur YouTube ou copier le code intégré d’une vidéo existante qui sera insérée dans un élément <iframe> de votre page Web.

Pour avoir le lien incorporé de la vidéo youtube, suivez ces étapes simples:

  1. Ouvrez le vidéo sur YouTube et cliquez sur le bouton share.
  2. Ouvrez le code Embed.
  3. Copiez le lien de Source.

Lorsque vous copiez le lien incorporé, vous pouvez l'insérer dans votre document HTML en tant que src de votre élément <iframe>. Définissez également la largeur et la hauteur de votre vidéo. Voyons maintenant à quoi ça va ressembler.

Exemple

<!DOCTYPE html>
<html>
  <body>
    <h2>Steve Jobs - How to Live before You Die</h2>
    <p>At his Stanford University commencement speech, Steve Jobs, CEO and co-founder of Apple and Pixar, urges us to pursue our dreams and see the opportunities in life's setbacks - including death itself.</p>
    <iframe width="500" height="320" src="https://www.youtube.com/embed/lcZDWo6hiuI"> </iframe>
  </body>
</html>