Comment fonctionne la vidéo HTML5 ? | Vidéo HTML

Qu'est-ce que HTML5 ?

HTML5 est la dernière version du langage de balisage hypertexte (HTML), un langage de codage pour le formatage du contenu sur l'internet. Toutes les pages web utilisent le HTML pour indiquer aux navigateurs comment afficher leur contenu. Par rapport aux versions précédentes du HTML, le HTML5 possède un certain nombre de fonctionnalités supplémentaires, dont la possibilité d'ajouter des vidéos à une page web. Parmi les autres caractéristiques du HTML5, citons la prise en charge des graphiques SVG, les balises permettant de définir la navigation sur un site web, ainsi que les balises d'en-tête et de pied de page.

Comment fonctionne l'élément vidéo HTML5 ?

L'élément HTML5 video indique au navigateur de charger un fichier vidéo à partir d'une autre source en spécifiant l'emplacement du fichier vidéo, de la même manière qu'un navigateur charge un fichier image (l'image elle-même n'est pas stockée dans le fichier HTML - le navigateur la tire d'un autre endroit). La largeur, la hauteur et d'autres attributs peuvent également être inclus pour indiquer au navigateur comment afficher la vidéo. D'autres codes de balisage peuvent indiquer au navigateur où placer la vidéo sur la page.

La balise vidéo HTML5 est < video> , et la balise est fermée, comme les autres éléments HTML, par < /video> .

Entre ces balises, une balise < source> indique l'emplacement du fichier vidéo. Dans cette balise, la source de la vidéo (src) et le type de fichier (type) sont indiqués comme suit :

<video>
 < source src="example.mp4" type="video/mp4"> 
 < /video>

Les attributs importants suivants peuvent également figurer dans la balise < video> :

• Width : Indique la largeur de la vidéo en pixels. Le nombre de pixels est indiqué entre guillemets : width="370"
• Height : Cet attribut spécifie la hauteur de la vidéo. Il fonctionne de la même manière que l'attribut width.
• Lecture, pause, volume : Ces commandes permettent à l'utilisateur de contrôler la lecture de la vidéo. Ajoutez les contrôles à la balise < vidéo> pour les inclure.

D'autres sources pour la vidéo peuvent également être placées entre les balises < vidéo> au cas où un navigateur ne prendrait pas en charge le premier format de fichier. Les navigateurs utilisent toujours la première source indiquée.

En outre, du texte peut être placé entre les balises < vidéo> ; ce texte ne s'affiche que si le navigateur de l'utilisateur ne prend pas en charge la vidéo HTML5.

En résumé, le code HTML5 pour une vidéo intégrée peut ressembler à ceci :

<contrôles vidéo width="370" height="130"> 
 < source src="example.mp4" type="video/mp4"> 
 < source src="alternate-example.webm" type="video/webm"> 
 Votre navigateur ne prend pas en charge les vidéos HTML5.
</vidéo>

Un certain nombre d'autres attributs, tels que autoplay (pour lire la vidéo dès le chargement de la page), loop (pour lire les vidéos en boucle), muted (pour couper le son des vidéos) et poster (pour afficher une image avant le chargement de la vidéo), peuvent également être utilisés dans l'élément vidéo. Mozilla dispose d'une bonne documentation sur ces attributs.

Quel protocole de streaming est utilisé avec HTML5 ?

HTML5 n'est pas en soi un protocole de streaming . Les sites Web construits avec HTML5 peuvent utiliser plusieurs protocoles de streaming différents pour lire des vidéos, notamment le streaming HTTP en direct (HLS) et MPEG-DASH. Ces protocoles sont configurés du côté du serveur , et non dans le code de balisage HTML.

Tous les navigateurs supportent-ils le HTML5 ?

Tous les principaux navigateurs prennent en charge HTML5, ce qui signifie qu'ils peuvent interpréter les balises HTML5 qui ne faisaient pas partie des versions antérieures de HTML. Toutefois, tous les navigateurs ne prennent pas en charge toutes les fonctionnalités de HTML5. Les développeurs doivent garder à l'esprit que certains utilisateurs peuvent avoir une version obsolète d'un navigateur qui ne peut pas interpréter l'élément vidéo HTML5.

Comment les sites web incluaient-ils du contenu vidéo avant HTML5 ?

Avant le lancement de HTML5 en 2008, les vidéos étaient le plus souvent intégrées à l'aide du plugin Adobe Flash. HTML5 a permis aux développeurs d'intégrer des vidéos sur des pages Web en utilisant seulement quelques balises HTML, éliminant ainsi le besoin d'un plugin. Par conséquent, Flash est devenu moins nécessaire, et Adobe a finalement cessé de prendre en charge Flash le 31 décembre 2020.

Aujourd'hui, la plupart des utilisateurs peuvent diffuser des vidéos en continu sans plugin de navigateur supplémentaire, et les développeurs peuvent utiliser diverses méthodes pour intégrer des vidéos sans dépendre d'un plugin. L'élément vidéo HTML5 est l'une des méthodes les plus utilisées pour ce faire.

Qu'est-ce qu'un plugin de navigateur ?

Un plugin de navigateur est un logiciel qui ajoute une fonctionnalité à un navigateur qui n'est pas incluse par ailleurs. Autrefois, les navigateurs n'offraient pas la possibilité de lire des vidéos. Des plugins tiers comme Adobe Flash ont permis de combler cette lacune.

Cependant, les plugins peuvent également présenter une menace pour la sécurité. Ils offrent une surface d'attaque supplémentaire (un moyen supplémentaire pour les acteurs externes de compromettre une session de navigation), en plus des surfaces d'attaque présentées par le navigateur et le site web. En outre, les plugins peuvent ralentir le fonctionnement des pages. Se reposer sur des plugins signifie que plusieurs logiciels doivent fonctionner correctement et rapidement pour charger une page web, et non une seule.

Si une vidéo est intégrée de manière native, ce qui est possible en HTML5, elle se chargera plus rapidement. Éviter l'utilisation d'un plugin est également plus sûr.

Comment les vidéos Cloudflare Stream sont-elles intégrées ?

Cloudflare Stream est une plateforme de vidéo à la demande qui combine l'encodage, le stockage, la diffusion et la lecture de vidéos. Consultez la documentation de Cloudflare Stream pour apprendre à charger des fichiers vidéo dans Stream et à les intégrer dans des pages Web. Ou, en savoir plus sur Cloudflare Stream avant de commencer.