Vidéo HTML5: Comment intégrer une vidéo dans votre HTML

Avant HTML5, pour qu'une vidéo soit lue sur une page Web, vous deviez utiliser un plugin comme Adobe Flash Player. Avec l'introduction de HTML5, vous pouvez désormais placer des vidéos directement dans la page elle-même.

Cela permet de lire des vidéos sur des pages conçues pour les appareils mobiles, car les plugins comme Adobe Flash Player ne fonctionnent pas sur Android ou iOS.

L' élément HTML est utilisé pour intégrer la vidéo dans des documents Web. Il peut contenir une ou plusieurs sources vidéo, représentées à l'aide de l' srcattribut ou de l'élément source.

Pour intégrer un fichier vidéo, ajoutez simplement cet extrait de code et remplacez le srcpar le chemin de votre fichier vidéo:

   Your browser does not support the video element. Kindly update it to latest version. 

L' élément est pris en charge par tous les navigateurs modernes. Cependant, tous les navigateurs ne prennent pas en charge le même format de fichier vidéo. Les fichiers MP4 sont le format le plus largement accepté, et d'autres formats tels que WebM et Ogg sont pris en charge dans Chrome, Firefox et Opera.

Pour vous assurer que votre vidéo est lue dans la plupart des navigateurs, il est recommandé de les encoder aux formats Ogg et MP4 et de les inclure dans l' élément comme dans l'exemple ci-dessus. Les navigateurs utiliseront le premier format reconnu.

Si, pour une raison quelconque, le navigateur ne reconnaît aucun des formats, le texte "Votre navigateur ne prend pas en charge l'élément vidéo. Veuillez le mettre à jour avec la dernière version" s'affiche à la place.

Vous avez peut-être également remarqué controlsdans la balise. Cet élément comprend de nombreux attributs utiles pour personnaliser l'expérience de lecture.

les attributs

controls

L' controlsattribut détermine si des commandes telles que le bouton de lecture / pause ou le curseur de volume apparaissent.

Il s'agit d'un attribut booléen, ce qui signifie qu'il peut être défini sur true ou false. Pour le définir sur true, ajoutez-le simplement à la balise. S'il n'est pas présent dans la balise, il sera défini sur false et les commandes n'apparaîtront pas.

autoplay

"autoplay" peut être défini sur true ou false. Vous le définissez sur true en l'ajoutant dans la balise, s'il n'est pas présent dans la balise, il est défini sur false. S'il est défini sur true, la lecture de la vidéo commencera dès qu'une quantité suffisante de la vidéo aura été mise en mémoire tampon pour qu'elle puisse être lue. De nombreuses personnes trouvent les vidéos à lecture automatique dérangeantes ou ennuyeuses. Utilisez donc cette fonctionnalité avec parcimonie. Notez également que certains navigateurs mobiles, tels que Safari pour iOS, ignorent cet attribut.

Ceci est un autre attribut booléen. En l'incluant autoplaydans la balise, la vidéo intégrée commencera à jouer dès qu'une quantité suffisante aura été mise en mémoire tampon.

Gardez à l'esprit que de nombreuses personnes trouvent les vidéos à lecture automatique perturbatrices ou ennuyeuses, utilisez donc cette fonctionnalité avec parcimonie. Notez également que certains navigateurs mobiles comme Safari pour iOS ignorent entièrement cet attribut.

poster

L' posterattribut est l'image qui s'affiche sur la vidéo jusqu'à ce que l'utilisateur clique pour la lire.

Les vidéos peuvent être chères

Bien qu'il soit plus facile que jamais d'inclure des vidéos sur votre page, il est souvent préférable de télécharger vos vidéos sur un service comme YouTube, Vimeo ou Wistia et d'intégrer leur code à la place. En effet, la diffusion de vidéos peut être coûteuse, à la fois pour vous en termes de coûts de serveur et pour vos spectateurs s'ils ont des plans de données limités.

L'hébergement de vos propres fichiers vidéo peut également entraîner des problèmes de bande passante, ce qui pourrait entraîner le bégaiement des vidéos à chargement lent. En plus de cela, la qualité des navigateurs a tendance à varier en matière de lecture vidéo, il est donc difficile de contrôler exactement ce que vos spectateurs verront. Il est également très facile de télécharger des vidéos intégrées à la balise, donc si vous êtes préoccupé par le piratage, vous voudrez peut-être examiner d'autres options.

Et avec cela, allez de l'avant et intégrez des vidéos à votre guise. Ou pas - c'est votre appel.