Comment optimiser le streaming vidéo HTML5 et la balise vidéo HTML5 [2023 Update]

Video Streaming & HTML5 Video

Si vous êtes novice en matière de streaming adaptatif, vous vous demandez peut-être pourquoi le streaming vidéo HTML5 fait tant parler de lui.

Globalement, le streaming vidĂ©o HTML5 permet de manipuler des contenus multimĂ©dias Ă  l’aide des balises HTML <audio> et <video>. L’utilisation de la balise <video> crĂ©e un lecteur vidĂ©o HTML5 natif et offre des options supplĂ©mentaires pour la personnalisation et l’affichage du contenu vidĂ©o.

Cela peut sembler technique et dĂ©routant, mais heureusement, la vidĂ©o en direct est aujourd’hui plus accessible que jamais pour les professionnels qui ne sont pas tout Ă  fait au fait de la technologie.

Avec l’aide de la bonne plateforme vidĂ©o, les diffuseurs peuvent tĂ©lĂ©charger des vidĂ©os sĂ©curisĂ©es et fournir un contenu de haute qualitĂ© avec un peu de JavaScript, de CSS, un code simple et une bonne comprĂ©hension de la balise HTML5 <video>.

Cet article traite du streaming vidĂ©o HTML5 et de ses principales applications. Ensuite, nous passerons brièvement en revue les lecteurs vidĂ©o HTML5 et nous aborderons trois façons d’intĂ©grer votre contenu vidĂ©o sur un site web. Ces mĂ©thodes comprennent l’intĂ©gration directe via une balise vidĂ©o HTML5, le dĂ©veloppement de votre lecteur et l’utilisation d’un lecteur existant.

Pour commencer, examinons les origines du streaming vidéo HTML5.

Table des matières

  • Qu’est-ce que le streaming vidĂ©o HTML5 et comment fonctionne-t-il ?
  • Qu’est-ce qu’un lecteur vidĂ©o HTML5 ?
  • Avantages de la diffusion vidĂ©o HTML5
  • Les dĂ©fis de la diffusion vidĂ©o HTML5
  • Protocole HLS pour la diffusion vidĂ©o HTML5
  • Comment intĂ©grer un lecteur pour le streaming HTML5
    • 1. IntĂ©grer une vidĂ©o avec HTML5
    • 2. DĂ©velopper votre lecteur HTML5
    • 3. Utiliser un lecteur HTML5 existant
  • Comment optimiser une balise de flux vidĂ©o HTML5
  • Comment ajouter une vidĂ©o d’arrière-plan Ă  HTML5
  • Balises HTML5 supplĂ©mentaires pour une meilleure diffusion en continu
  • FAQ
  • Conclusion

Qu’est-ce que le streaming vidĂ©o HTML5 et comment fonctionne-t-il ?

Qu'est-ce que la diffusion vidéo en direct ?

Cideo steraming permet aux utilisateurs de regarder des vidĂ©os sur l’internet.

Au dĂ©but des annĂ©es 1990, alors que l’Internet en Ă©tait encore Ă  ses balbutiements, les premiers navigateurs web ne prenaient en charge que les pages HTML statiques. Ces pages Ă©taient de simples documents textuels avec des liens hypertextes qui permettaient aux utilisateurs de naviguer d’une page Ă  l’autre.

Vers 1994, les premières images sont apparues sur les sites web avec l’introduction de la balise HTML <img>.

Puis, en 1995, les balises audio et
balises vidéo HTML
ont Ă©tĂ© créées, ce qui a permis aux dĂ©veloppeurs web d’intĂ©grer du contenu multimĂ©dia sur leurs sites web.
qui ont permis aux dĂ©veloppeurs de sites web d’intĂ©grer des contenus multimĂ©dias sur leurs sites.

Cependant, ce n’est qu’en 2010 que le streaming vidĂ©o HTML5 a Ă©tĂ© largement adoptĂ©. En effet, les versions antĂ©rieures du langage HTML ne prenaient pas en charge la balise HTML vidĂ©o, et les navigateurs ne pouvaient pas lire les vidĂ©os sans un plugin comme Adobe Flash Player ou Microsoft Silverlight.

Lorsque le HTML5 a Ă©tĂ© publiĂ©, il comprenait une nouvelle balise <video> qui permettait aux navigateurs de lire des vidĂ©os sans nĂ©cessiter de plugins en mode natif. HTML5 a Ă©galement introduit plusieurs autres fonctionnalitĂ©s qui ont rendu le dĂ©veloppement de sites et d’applications web plus accessible.

Les avantages d’une technologie logicielle amĂ©liorĂ©e sont notamment les suivants :

Vous devez Ă©galement connaĂ®tre la diffusion vidĂ©o multicast HTML5, un type de diffusion en direct qui utilise la balise vidĂ©o HTML5 <> pour envoyer un seul flux vidĂ©o Ă  plusieurs spectateurs. Avec l’aide d’un CDN, d’une vidĂ©o HTML5 en direct, vous pouvez diffuser votre contenu Ă  des spectateurs du monde entier.

Il existe trois méthodes de diffusion vidéo en ligne:

  1. Format propriétaire
  2. Joueur intermédiaire
  3. Streaming vidéo HTML5

Vérifions-les.

1. Utilisation d’un format propriĂ©taire

La première mĂ©thode de diffusion vidĂ©o en ligne Ă©tait courante dans les premiers jours de l’internet, mais elle est aujourd’hui pratiquement obsolète. NĂ©anmoins, il est essentiel de le mentionner et de le passer en revue, car il s’agit d’un Ă©lĂ©ment essentiel de l’histoire de la diffusion en direct.

Avec un format propriĂ©taire, le contenu vidĂ©o utiliserait un format de diffusion vidĂ©o exclusif Ă  ce site. En effet, dans les premiers temps, lorsque les radiodiffuseurs ont commencĂ© Ă  partager des vidĂ©os sur l’internet la plupart des navigateurs web ne disposaient pas de lecteurs vidĂ©o intĂ©grĂ©s.

Au lieu de cela, les sites web utiliseraient un format propriétaire, tel que .mov, .rm ou wmv. Ils fourniraient ensuite leur propre lecteur vidéo et placeraient la vidéo sur la page web elle-même.

Certaines vidéos utilisent un lecteur dédié, comme Apple QuickTime pour les fichiers .mov. Cependant, le partage des vidéos était difficile dans les premiers temps de la diffusion vidéo en continu.

2. Utilisation d’un lecteur intermĂ©diaire

L’utilisation d’un lecteur intermĂ©diaire est une autre mĂ©thode très rĂ©pandue pour la diffusion en direct de contenus vidĂ©o. L’un des lecteurs intermĂ©diaires les plus populaires est YouTube.

YouTube est apparu sur la scène en 2005 et n’a cessĂ© de gagner en popularitĂ© depuis lors. YouTube a contribuĂ© Ă  la gĂ©nĂ©ralisation de la vidĂ©o en continu, et c’est un excellent exemple de site web populaire qui utilise un lecteur intermĂ©diaire.

Lorsque les utilisateurs téléchargent un fichier vidéo sur YouTube, les spectateurs accèdent au contenu par le biais du lecteur intégré de YouTube. De même, les spectateurs peuvent partager le contenu audio et vidéo via un code YouTube.

Cependant, les navigateurs modernes intègrent dĂ©sormais leurs propres lecteurs vidĂ©o. Cela signifie qu’il n’est pas toujours nĂ©cessaire qu’un site web fournisse le lecteur, de sorte que l’utilisation des lecteurs intermĂ©diaires est en baisse.

3. Utilisation de la diffusion vidéo HTML5

La mĂ©thode la plus moderne de diffusion vidĂ©o en continu est le le streaming vidĂ©o HTML5. Il s’agit de l’approche la plus innovante en matière de vidĂ©o en continu.

Avec la diffusion vidéo HTML5, le site web qui héberge le contenu utilise le protocole HTTP natif pour diffuser le média directement aux spectateurs.

Les balises de contenu (par exemple, la balise HTML <vidéo> ) font partie du code HTML.

Ainsi, l’utilisation de la balise HTML <video> crĂ©e le lecteur vidĂ©o HTML5 natif de votre navigateur. HTML5 de votre navigateur. Ces balises indiquent au protocole HTTP ce qu’il doit faire de ce contenu. Par exemple, HTTP affiche le texte et un lecteur audio diffuse le contenu audio. VoilĂ  comment fonctionne la diffusion vidĂ©o HTML5 et comment vous pouvez intĂ©grer une vidĂ©o avec HTML5 en utilisant le protocole HTTP natif.

En outre, les balises HTML possèdent divers attributs, ou paramètres, qui fournissent des dĂ©tails supplĂ©mentaires sur la manière de prĂ©senter le contenu. Par exemple, avec la balise <img>, vous pouvez spĂ©cifier la taille de l’image.

Plus récemment, le HTML5 a élargi les capacités médiatiques du HTML de base.

Par exemple, les améliorations apportées à la balise <img> et la nouvelle balise <video> offrent aux créateurs de contenu plus de souplesse et de facilité dans la présentation des contenus multimédias. En outre, la compréhension des différentes balises vidéo HTML permet de personnaliser davantage votre présentation.

Cette flexibilité des balises vidéo HTML permet aux radiodiffuseurs de diffuser des médias sans se soucier du navigateur utilisé par un visiteur donné.

Qu’est-ce qu’un lecteur vidĂ©o HTML5 ?

Lecteur vidéo HTML5
Les lecteurs vidéo HTML5 ont révolutionné la manière dont nous diffusons des vidéos.

Les lecteurs vidéo HTML5 ont révolutionné la manière dont nous diffusons des vidéos.

Pendant des annĂ©es, le lecteur vidĂ©o Flash d’Adobe a Ă©tĂ© la principale mĂ©thode de diffusion de vidĂ©os sur l’internet. Cependant, Flash est dĂ©sormais considĂ©rĂ© comme un protocole de diffusion en continu obsolète. La plupart des navigateurs modernes, comme Chrome, ont cessĂ© de prendre en charge le lecteur Adobe Flash Ă  la fin de l’annĂ©e 2022.

Si Adobe Flash Player est devenu obsolète, c’est en partie parce qu’il n’est pas pris en charge par les appareils mobiles. Le fait que la plupart des gens accèdent Ă  l’internet par le biais d’appareils mobiles a contribuĂ© Ă  la disparition d’Adobe Flash Player. La technologie de diffusion vidĂ©o la plus courante est dĂ©sormais celle des lecteurs vidĂ©o HTML5 et des protocoles de diffusion HLS.

HTML5 est une solution de diffusion en continu plus moderne. Il peut ĂŞtre utilisĂ© pour diffuser des vidĂ©os directement Ă  partir d’un site web. L’un des principaux avantages de l’HTML5 est qu’il prend en charge la diffusion mobile sur tous les appareils.

La diffusion vidĂ©o en continu HTML5 offre un moyen plus simple d’utiliser la vidĂ©o sur les pages web. Avant sa publication en tant que langage de balisage en 2014, les vidĂ©os ne pouvaient ĂŞtre lues que dans un navigateur avec des plugins comme Flash. En utilisant HTML5, les dĂ©veloppeurs n’ont plus Ă  se soucier du navigateur ou de l’extension utilisĂ©s par leurs visiteurs, ce qui permet un meilleur accès Ă  la vidĂ©o.

En outre, HTML5 simplifie la diffusion de vidéos en prenant en charge divers attributs, éléments et balises pour faciliter la structure de votre page web.

Ces fonctions de soutien comprennent des articles, des sections et des balises multimĂ©dias qui permettent d’ajouter des formats vidĂ©o et audio Ă  votre contenu.

Avantages de la diffusion vidéo HTML5

Avec HTML5, les dĂ©veloppeurs web peuvent dĂ©sormais ajouter de la vidĂ©o et de l’audio Ă  une page web sans plugins. Cela prĂ©sente de nombreux avantages, notamment

  • RĂ©duction du temps et des coĂ»ts de dĂ©veloppement : Auparavant, il fallait utiliser diffĂ©rents plugins pour diffĂ©rents navigateurs. Cela a nĂ©cessitĂ© plus de temps de dĂ©veloppement pour assurer la compatibilitĂ© avec les navigateurs les plus courants. Tous les principaux navigateurs prennent en charge le HTML5, ce qui rĂ©duit le temps de dĂ©veloppement.
  • Meilleure prise en charge des appareils mobiles : L’un des principaux avantages de l’utilisation de HTML5 est la prise en charge des appareils mobiles. Cela n’Ă©tait pas possible avec Flash, et HTML5 offre donc un meilleur accès Ă  la vidĂ©o en continu sur tous les appareils.
  • Moins de ressources : HTML5 ne nĂ©cessite pas de plugins ou de logiciels supplĂ©mentaires, contrairement Ă  d’autres solutions de diffusion vidĂ©o. Cela signifie qu’il utilise moins de ressources, ce qui profite Ă  la fois aux utilisateurs et aux dĂ©veloppeurs.
  • AmĂ©lioration de l’accessibilitĂ© : L’utilisation des balises vidĂ©o HTML5 permet Ă©galement une meilleure prise en charge des personnes handicapĂ©es. Par exemple, les lecteurs d’Ă©cran peuvent dĂ©sormais accĂ©der au contenu vidĂ©o prĂ©cĂ©demment cachĂ© dans les vidĂ©os Flash.
  • SimplicitĂ© d’ajout d’applications/outils/liens : L’ajout d’applications et de liens est beaucoup plus facile et rapide lorsqu’on utilise un lecteur vidĂ©o HTML5. En effet, vous n’avez pas Ă  vous soucier du navigateur utilisĂ© par vos visiteurs.
  • Rendu et traitement plus rapides : Les vidĂ©os HTML5 se chargent plus rapidement que les vidĂ©os Flash car elles n’ont pas besoin d’ĂŞtre tĂ©lĂ©chargĂ©es au prĂ©alable. Il en rĂ©sulte moins de temps d’attente pour les utilisateurs et moins de pression sur les serveurs.

La vidĂ©o HTML5 est tellement accessible que la plupart des gens ne se rendent mĂŞme pas compte qu’ils l’utilisent. Il est ainsi devenu le lecteur vidĂ©o de prĂ©dilection.

Les défis de la diffusion vidéo HTML5

Si le streaming HTML5 prĂ©sente de nombreux avantages pour les diffuseurs et les tĂ©lĂ©spectateurs, il n’est pas dĂ©pourvu de dĂ©fauts.

D’une part, HTML5 a besoin d’un format et d’un protocole spĂ©cifiques pour fonctionner. Comme nous l’avons dĂ©jĂ  mentionnĂ©, un format utilisĂ© par HTML-5 et qui a gagnĂ© en popularitĂ© est le Dynamic Adaptive Streaming over HTTPS, ou MPEG-DASH.

Malheureusement, tous les navigateurs et appareils ne prennent pas en charge MPEG-DASH de manière native. Vous pouvez donc avoir besoin d’un transcodeur pour convertir votre flux dans d’autres formats tels que HLS ou RTMP.

Un autre dĂ©fi est que lors de la diffusion en direct avec HTML5, vous pouvez avoir besoin d’une bande passante et de ressources supplĂ©mentaires pour garantir des flux de haute qualitĂ©. Ce type de diffusion en continu est donc plus coĂ»teux que la diffusion en continu par plug-in.

Protocole HLS pour la diffusion vidéo HTML5

Ces dernières années, HLS est devenu un protocole courant pour la diffusion de vidéos sur les lecteurs HTML5.

Si vous ne connaissez pas ce terme, HLS est un acronyme pour HTTP Live Streaming. HLS est un protocole de diffusion en continu de médias qui fournit des médias visuels et audio aux téléspectateurs en ligne.

Ces avancées technologiques ont été avantageuses tant pour les radiodiffuseurs que pour les téléspectateurs. En particulier, les radiodiffuseurs peuvent modifier à la fois HTML5 et HLS en fonction de leurs spécifications. En outre, ces protocoles sont plus sûrs, plus fiables et plus rapides que les technologies antérieures.

Lancé pour la première fois par Apple en 2009, les diffuseurs préfèrent souvent le streaming HLS pour sa large prise en charge par de nombreux navigateurs et appareils.

Parmi les autres protocoles plus anciens, on peut citer

  • RTMP signifie Real-Time Messaging Protocol (protocole de messagerie en temps rĂ©el). Il s’agit d’un protocole propriĂ©taire dĂ©veloppĂ© par Adobe, couramment utilisĂ© pour la diffusion en continu de donnĂ©es audio et vidĂ©o.
  • HDS est un acronyme pour HTTP Dynamic Streaming. Il est similaire au HLS mais a Ă©tĂ© dĂ©veloppĂ© par Adobe dans le cadre de la plateforme Flash.
  • MSS est l’acronyme de Microsoft Smooth Streaming. Il s’agit d’un protocole propriĂ©taire dĂ©veloppĂ© par Microsoft et couramment utilisĂ© dans les applications Silverlight.
  • MPEG-Dash est un protocole plus rĂ©cent basĂ© sur la normalisation ISO.

Si HLS est le protocole de diffusion en continu le plus utilisé, MPEG-Dash gagne en popularité grâce à son format standardisé.

Pour en savoir plus sur le protocole HLS en général et sur le streaming HLS avec un lecteur vidéo HTML5, consultez notre article sur les protocoles de streaming HLS.

Comment intégrer un lecteur pour le streaming HTML5

Maintenant que vous connaissez l’histoire et l’objectif des lecteurs vidĂ©o HTML5, nous allons nous pencher sur quelques approches de la diffusion en continu HTML5.

Pour commencer, examinons les trois principales façons d’intĂ©grer des vidĂ©os sur votre site web:

  • Utilisez la balise HTML5 <video> directement dans votre navigateur
  • CrĂ©ez votre lecteur
  • Choisir un lecteur HTML5 prĂŞt Ă  l’emploi
  • IntĂ©grer une vidĂ©o avec HTML5

1. Intégrer une vidéo avec HTML5

intégrer une vidéo dans une balise html5
Vous pouvez utiliser la balise vidéo HTML5 pour personnaliser différents aspects de votre flux vidéo.

Lorsque vous mettez en place le streaming vidéo HTML5 sur votre site web, vous devez déclarer ce qui suit :

  • Une vidĂ©o <> tag
  • L’URL de la vidĂ©o
  • Toute exigence stylistique que vous souhaiteriez personnaliser (pour un lecteur vidĂ©o plus attrayant que le lecteur standard)

*Note : Il est important de noter que la balise <video> est un simple morceau de code que vous pouvez ajouter Ă  vos pages web.

La balise vidéo standard <> offre les fonctionnalités suivantes :

  • SpĂ©cifier la largeur et la hauteur du lecteur
  • Afficher ou masquer les commandes vidĂ©o, notamment la lecture/pause, le volume, le basculement plein Ă©cran et le curseur de recherche.
  • DĂ©finir une image de poster Ă  afficher pendant le tĂ©lĂ©chargement de la vidĂ©o ou ne pas la lire
  • Fournir un ensemble de vidĂ©os dans diffĂ©rents formats vidĂ©o HTML5 afin que chaque navigateur puisse lire un format qu’il prend en charge.
  • Inclure des sous-titres pour malentendants ou des sous-titres en plusieurs langues.
  • Indiquez au navigateur s’il doit commencer Ă  tĂ©lĂ©charger la vidĂ©o au chargement de la page ou seulement lorsque l’utilisateur appuie sur “Play”.
  • ContrĂ´ler les paramètres du jeu automatique
  • DĂ©cidez si le contenu doit ĂŞtre lu une seule fois ou en boucle.
  • Indiquez si vous souhaitez lire la vidĂ©o sans le son (en sourdine). Par exemple, les vidĂ©os automatisĂ©es sur Facebook affichent l’option de mise en sourdine en surimpression sur la vidĂ©o.

*Remarque : nous tenons Ă  souligner que, bien que la balise HTML5 <video> soit considĂ©rĂ©e comme l’Ă©lĂ©ment de lecteur vidĂ©o le plus largement pris en charge, elle n’est pas prise en charge par toutes les versions de tous les navigateurs.

Supposons que des utilisateurs visitent votre site en utilisant des versions antérieures aux navigateurs suivants. Dans ce cas, ils ne pourront pas regarder les vidéos affichées en HTML5 :

Prise en charge du navigateur html5

  • Chrome : Version 4.0
  • MicrosoftExplorer (prĂ©dĂ©cesseur de Edge) : Version 9.0
  • Mozilla Firefox : Version 3.5
  • Safari : Version 4.0
  • Opera : Version 10.5

Il est Ă©galement important de noter que le streaming vidĂ©o HTML5 nĂ©cessite des connaissances techniques et des ressources dĂ©diĂ©es. Par consĂ©quent, il est prĂ©fĂ©rable d’opter pour un lecteur HTML5 existant si vous n’avez pas les connaissances nĂ©cessaires pour manipuler le code HTML5, mais nous discuterons de cette option plus en dĂ©tail dans cet article.

2. Développer votre lecteur HTML5

lecteur vidéo html5
Vous pouvez dĂ©velopper votre propre lecteur HTML5 avec la formation et l’Ă©quipe adĂ©quates.

Une autre option pour intĂ©grer du contenu vidĂ©o sur votre site web est le lecteur vidĂ©o HTML5. Cependant, la crĂ©ation d’un lecteur vidĂ©o HTML5 personnalisĂ© nĂ©cessite une combinaison de codage HTML et CSS. Il nĂ©cessite Ă©galement une connaissance de l’API HTML5 Media.

L’apparence du lecteur est basique sans spĂ©cifier de code qui stylise le lecteur vidĂ©o HTML5. Cela dĂ©pend Ă©galement du navigateur Ă  partir duquel la vidĂ©o est lue.

Fournir une interface cohĂ©rente pour la diffusion vidĂ©o HTML5 sur votre site est Ă©galement utile pour l’image de marque et la prĂ©sentation visuelle.

Encore une fois, il est important de noter que le streaming vidĂ©o HTML5 est une option raisonnablement technique qui convient aux personnes ayant les connaissances requises en matière de codage. Sinon, un lecteur HTML5 existant construit par une Ă©quipe spĂ©cialisĂ©e via une API de diffusion en direct est une meilleure option si vous n’avez pas le savoir-faire technique.

3. Utiliser un lecteur HTML5 existant

html5 streaming video
Le lecteur vidĂ©o de Dacast, avec ses fonctions en marque blanche, offre une plateforme prĂŞte Ă  l’emploi pour le streaming vidĂ©o HTML5 et la personnalisation de l’expĂ©rience utilisateur.

Nous vous recommandons vivement d’utiliser un lecteur HTML5 existant si vous ĂŞtes novice en matière de diffusion.

Comme indiquĂ© ci-dessus, de nombreux lecteurs HTML5 existent dĂ©jĂ  et peuvent ĂŞtre facilement personnalisĂ©s par les radiodiffuseurs pour reprĂ©senter leur marque sans connaissances techniques approfondies. De plus, cela permet aux utilisateurs qui n’ont pas les connaissances techniques pour la diffusion vidĂ©o HTML5 de diffuser la vidĂ©o de leur choix.

Voici quelques lecteurs vidĂ©o viables disponibles aujourd’hui :

La vidĂ©o HTML5 native ne prend pas en charge les protocoles RTMP app streaming ou HDS. Cependant, JW prend en charge ces deux protocoles. Ainsi, comme mentionnĂ© ci-dessus, si vous prĂ©voyez d’utiliser un lecteur vidĂ©o HTML5 uniquement, HLS est probablement le meilleur protocole pour vous.

Nous aimerions également souligner que certains lecteurs vidéo HTML5 existants, y compris celui de Dacast, sont conçus pour une diffusion en continu à faible latence. Toute vidéo diffusée avec un lecteur Dacast utilise automatiquement une diffusion en continu à faible latence. Ainsi, quelle que soit la connexion internet de votre spectateur, il pourra regarder votre contenu.

Comment optimiser une balise de flux vidéo HTML5

Il existe plusieurs façons de tirer le meilleur parti de la balise HTML5 <video>.

La première chose Ă  laquelle il faut prĂŞter attention est le format. L’utilisation de formats standard permet aux utilisateurs de lire facilement les vidĂ©os. Le format MP4 (MPEG-4) est le plus rĂ©pandu. Cependant, les formats Ogg et WebM sont de plus en plus connus.

WebM est désormais pris en charge par les versions récentes de Chrome, Firefox, Opera, Safari sur OS/X et Microsoft Internet Explorer 9 et supérieur (nécessite les composants WebM MF). Grâce à cette évolution, les formats multiples facilitent la visualisation.

L’un des principaux moyens d’optimisation de la diffusion vidĂ©o consiste Ă  rĂ©duire le temps de latence. Aujourd’hui, la vidĂ©o est la forme la plus populaire de consommation de contenu. Les utilisateurs ne passent que quelques secondes Ă  attendre que les vidĂ©os commencent Ă  ĂŞtre lues.

Les diffuseurs voudront également optimiser les paramètres de contrôle. Voici une brève description de quelques paramètres courants auxquels il convient de prêter attention :

  • Taille physique et rĂ©solution: DĂ©finir la taille physique maximale afin de contrĂ´ler les tĂ©lĂ©chargements et de rĂ©duire le temps de latence. Par exemple, l’utilisation d’une image de 1280Ă—720 est gĂ©nĂ©ralement suffisante pour la plupart des vidĂ©os.
  • Longueur: DĂ©coupez les vidĂ©os pour capturer les images les plus intĂ©ressantes.
  • QualitĂ© et dĂ©bit: Ajustez ces paramètres pour rĂ©duire la taille du fichier sans affecter de manière significative la qualitĂ© de la vidĂ©o HTML5 perçue.
  • Codec vidĂ©o: En gĂ©nĂ©ral, vous pouvez utiliser les paramètres par dĂ©faut pour normaliser et optimiser la vidĂ©o pour le web. Cependant, dans certains cas, vous souhaitez rĂ©gler le codec pour rĂ©duire la taille du fichier manuellement.
  • Compression: Compressez toujours les fichiers vidĂ©o avant de les utiliser sur votre site.
  • Fournissez des options de repli : Si votre vidĂ©o HTML5 n’est pas prise en charge par un site web ou certains appareils, proposez des options de repli pour une meilleure compatibilitĂ©. Par exemple, vous pouvez fournir une image statique avec un lien pour tĂ©lĂ©charger les vidĂ©os ou spĂ©cifier des formats optionnels pour des navigateurs spĂ©cifiques.

Comment ajouter un arrière-plan vidéo à HTML5

Si vous souhaitez attirer l’attention d’un visiteur qui se rend pour la première fois sur votre site, vous disposez, dans le meilleur des cas, de 20 secondes. L’un des moyens d’y parvenir est d’utiliser des arrière-plans vidĂ©o.

Un arrière-plan vidĂ©o peut ĂŞtre un excellent moyen d’attirer immĂ©diatement l’attention de l’internaute tout en lui fournissant des informations prĂ©cieuses sur votre marque, votre produit ou votre service.

Les arrière-plans vidĂ©o peuvent crĂ©er une expĂ©rience immersive qui attire les utilisateurs sur votre site s’ils sont utilisĂ©s correctement. Cependant, s’ils ne sont pas utilisĂ©s avec soin, ils peuvent ĂŞtre très gĂŞnants et augmenter considĂ©rablement le temps de chargement de votre page.

Vous pouvez ajouter un arrière-plan vidéo HTML à votre site en utilisant la balise <video> et quelques lignes de CSS.

Tout d’abord, tĂ©lĂ©chargez votre vidĂ©o dans un format compatible avec le web, tel que .mp4. Vous pouvez utiliser un convertisseur en ligne si nĂ©cessaire.

Ensuite, ajoutez le code suivant Ă  votre fichier HTML entre les balises <head></head >:

<boucle de lecture automatique de la vidéo en sourdine>

<source src= “votre-video.mp4” type= “video/mp4”>

</vidéo>

Ajoutez ensuite le code CSS suivant Ă  votre fichier HTML entre le style <></style> tags :

vidéo {

position : fixe ;

Ă  droite : 0 ;

bas : 0 ;

largeur minimale : 100 % ;

hauteur minimale : 100 % ;

largeur : auto ;

hauteur : auto ;

z-index : -100 ;

arrière-plan : URL(your-image.jpg) no-repeat ;

Taille de l’arrière-plan : couverture ;

}

Remplacez “votre-video.mp4” et “votre-image.jpg” par les noms de fichiers et les emplacements appropriĂ©s.

Vous pouvez Ă©galement ajouter des sources vidĂ©o supplĂ©mentaires en ajoutant des balises <source> entre les balises <video.></video> dans votre fichier HTML. C’est utile si vous souhaitez fournir diffĂ©rentes versions de la vidĂ©o pour diffĂ©rents appareils.

Inversement, vous pouvez utiliser une plateforme d’hĂ©bergement vidĂ©o telle que Dacast pour diffuser votre vidĂ©o en continu au lieu de l’hĂ©berger sur vos serveurs. Vous pouvez ainsi gagner du temps et de l’argent tout en offrant une meilleure expĂ©rience de diffusion Ă  vos tĂ©lĂ©spectateurs.

Balises HTML5 supplémentaires pour une meilleure diffusion en continu


La balise vidĂ©o <> n’est pas le seul outil de votre boĂ®te Ă  outils HTML5 pour optimiser les vidĂ©os.
Par exemple, la liste des balises <source> ainsi que les balises <type> dans un ordre optimisé peut améliorer les performances de votre vidéo.

C’est ce que dĂ©montre cet exemple de code HTML5 pour la diffusion de vidĂ©os en direct :

<video width=”480″ controls>

<source scr=”https://myweb.org/webm/video1.webm” type=”video/webm”>

<source scr=”https://myweb.org/mp4/video1.mg4″ type=”video/mp4″>

<source scr=”https://myweb.org/ogg/video1.ogv” type=”video/ogv”>

<track kind=”captions” src=”sampleCaption_he.vtt” scrlang=”he”>

</vidéo>

N’oubliez pas qu’un navigateur lit le premier type de format pris en charge. En d’autres termes, la première entrĂ©e de la liste est la valeur par dĂ©faut. Chrome et Firefox liront la vidĂ©o WebM, tandis que les prĂ©dĂ©cesseurs de Microsoft Edge passeront Ă  la vidĂ©o MP4.

Il est conseillĂ© d’Ă©numĂ©rer d’abord la vidĂ©o la plus prise en charge et la plus petite afin de s’assurer que le fichier est lu par dĂ©faut. Utilisez le lecteur vidĂ©o HTML5 pour vĂ©rifier le format pris en charge par votre navigateur.

Vous pouvez Ă©galement inclure une balise <track> pour fournir des lĂ©gendes ou des sous-titres Ă  votre vidĂ©o. C’est utile pour les tĂ©lĂ©spectateurs sourds ou malentendants, ou si vous diffusez un Ă©vĂ©nement en direct dans une langue Ă©trangère.

La balise <track> doit comporter un attribut kind rĂ©glĂ© sur “captions” ou “subtitles” et un attribut src qui pointe vers le fichier .vtt contenant vos captions ou sous-titres.

Utilisez l’API HTML5 Fullscreen pour offrir une meilleure expĂ©rience visuelle Ă  vos utilisateurs. Cela leur permet de visionner votre vidĂ©o en mode plein Ă©cran sans quitter votre site.

Pour utiliser l’API Fullscreen, vous devez ajouter l’attribut allow full screen Ă  votre balise <iframe>. Vous pouvez Ă©galement utiliser une fonction JavaScript pour activer ou dĂ©sactiver le mode plein Ă©cran.

L’utilisation de quelques balises HTML5 supplĂ©mentaires vous permettra de personnaliser votre lecteur vidĂ©o. Voici quelques options :

  • <width La balise > contrĂ´le la largeur de la vidĂ©o qui est lue.
  • <controls> est un attribut boolĂ©en qui permet aux utilisateurs d’accĂ©der aux contrĂ´les de lecture.
  • <La balise track> crĂ©e une transcription afin d’amĂ©liorer l’accessibilitĂ© du contenu.
  • <embed> crĂ©e un conteneur pour les mĂ©dias externes.

Enfin, si vous souhaitez que la vidéo démarre automatiquement, utilisez la fonction
<autoplay>
l’Ă©lĂ©ment vidĂ©o.

FAQ

1. En quoi le HTML5 est-il différent du HTML ?

HTML et HTML5 sont des langages de balisage hypertexte que les codeurs utilisent principalement pour développer des pages web. La principale différence est que HTML ne prend pas en charge les balises audio et vidéo. Inversement, HTML5 est une version plus récente de HTML qui prend en charge le streaming vidéo et audio sans nécessiter de plugin externe.

2. Que signifie HTML5 ?

HTML5 est un langage de programmation qui signifie Hypertext Markup Language 5. Il s’agit d’une suite du HTML4 qui prend en charge la lecture vidĂ©o, la rĂ©activitĂ© mobile, le rendu, les graphiques et bien plus encore, sans nĂ©cessiter de plugin comme Adobe Flash Player.

3. Qu’est-ce qu’un lecteur HTML5 ?

Les lecteurs HTML5 sont des plugins qui reçoivent du contenu de plateformes d’hĂ©bergement vidĂ©o ou de rĂ©seaux de diffusion de contenu utilisant le protocole de diffusion en direct HTTPS. Ils sont extrĂŞmement flexibles et compatibles, ce qui leur permet de lire des vidĂ©os et des fichiers audio HTML5 de manière transparente sur les sites web et sur diffĂ©rents appareils, y compris les tĂ©lĂ©phones portables.

4. Le lecteur vidéo HTML5 est-il gratuit ?

Certains lecteurs vidĂ©o HTML5 sont gratuits (lecteurs vidĂ©o web open source) tandis que d’autres sont payants (lecteurs vidĂ©o web commerciaux).

Les lecteurs vidéo HTML5 libres ou gratuits fournissent un code source gratuit que les programmeurs peuvent personnaliser pour développer leur propre version du lecteur.

5. Quels sont les avantages de l’utilisation d’un lecteur vidĂ©o HTML5 ?

Voici quelques avantages de la diffusion de vidĂ©os en continu Ă  l’aide d’un lecteur vidĂ©o HTML5.

  • HTML5 est pris en charge par tous les principaux navigateurs. Il n’est donc plus nĂ©cessaire d’utiliser diffĂ©rents plugins pour diffĂ©rents navigateurs.
  • Contrairement aux langages de balisage prĂ©cĂ©dents, HTML5 prend en charge les appareils mobiles, ce qui permet Ă  un plus grand nombre de personnes de regarder des vidĂ©os en continu.
  • Ces lecteurs vidĂ©o nĂ©cessitent moins de ressources. Par exemple, les lecteurs HTML5 n’ont pas besoin d’un fichierd’autres supplĂ©mentaires.
  • Il est plus facile d’ajouter des applications et des liens lorsque l’on utilise des lecteurs vidĂ©o HTML5.
  • Les lecteurs vidĂ©o HTML5 ont un rendu plus rapide car ils n’ont pas besoin d’ĂŞtre tĂ©lĂ©chargĂ©s au prĂ©alable.

Conclusion

Flux vidéo HTML5
La balise Video HTML5 script intègre un script côté client en JS (JavaScript).

En rĂ©sumĂ©, la diffusion vidĂ©o HTML5 amĂ©liore les pages web et suscite l’intĂ©rĂŞt des visiteurs mieux que le texte seul. Pour fidĂ©liser les tĂ©lĂ©spectateurs, les radiodiffuseurs doivent optimiser la diffusion HTTP en direct afin de garantir aux tĂ©lĂ©spectateurs une diffusion vidĂ©o rapide, fluide et compatible. En utilisant correctement les balises HTML5, vous vous assurez que votre contenu est accessible et que les visiteurs reviennent.

Dans cet article, nous avons dĂ©fini le streaming vidĂ©o et les lecteurs vidĂ©o HTML5. Nous avons Ă©galement discutĂ© des moyens de diffuser des vidĂ©os en direct sur votre site web par le biais de l’intĂ©gration. En outre, nous avons mis en Ă©vidence les avantages et les inconvĂ©nients de chaque mĂ©thode.

PrĂŞt Ă  essayer notre plateforme de streaming vidĂ©o ? Nous proposons une gamme de fonctionnalitĂ©s nouvelles et avancĂ©es Ă  des prix abordables, y compris l’hĂ©bergement de vidĂ©os chinoises et des options de monĂ©tisation.

Inscrivez-vous Ă  notre essai gratuit de 14 jours pour commencer Ă  diffuser dès aujourd’hui. Nous vous aiderons Ă  dĂ©marrer la diffusion en continu en quelques minutes. Aucune carte de crĂ©dit n’est nĂ©cessaire.

Commencez gratuitement

Après lecture, que pensez-vous de l’intĂ©gration de vidĂ©os Ă  l’aide de HTML5 ? Avez-vous des questions auxquelles vous aimeriez que nous rĂ©pondions ici ou dans de futurs articles ? Faites-nous part de vos commentaires dans la section “chat” !

Vous pouvez Ă©galement rejoindre notre groupe LinkedIn pour bĂ©nĂ©ficier d’offres exclusives et de conseils rĂ©guliers sur la diffusion en direct.

Tzipora Elias

Tzipora Elias is a PMP certified project and program manager at Agile SEO and an experienced writer, with 30 years of a variety of experience in the IT field.