Le guide ultime du streaming HTML5

HTML5 est la plateforme la plus populaire pour la lecture de vidéos. Ce guide ultime vous aidera à mettre en œuvre la diffusion en continu HTML5 qui vous permet d’atteindre n’importe quel appareil, n’importe où sur Terre, à n’importe quel moment.

Quelle que soit la manière dont on l’envisage, la diffusion en direct est en pleine explosion. Plus de 1,9 milliard d’ internautes devraient utiliser la vidéo en ligne d’ici à 2018. Les revenus mondiaux de la vidéo OTT devraient atteindre plus de 20 milliards de dollars d’ ici l’année prochaine. C’est le moment de se lancer à fond dans la vidéo en ligne.

Sept étapes clés vers le streaming HTML5

La diffusion vidéo en direct peut être déroutante pour les nouveaux venus. Bien sûr, il y a la facilité : La diffusion en continu sur Facebook, par exemple, se fait en un clin d’œil. Mais Facebook Live et d’autres plateformes de diffusion sociale telles que Youtube Live présentent de sérieuses limites.

Si vous avez besoin d’une approche plus professionnelle, les choses se compliquent un peu. Certaines personnes se perdent dans le labyrinthe du langage technique. Ne soyez pas comme eux. Avec une bonne préparation – y compris la lecture de cet article – vous serez en mesure de naviguer facilement dans la terminologie et la technologie de la diffusion en direct.

Ce guide vous guidera à travers sept étapes clés et considérations pour la diffusion en continu HTML5. Commençons !

1. Besoins en équipement

Le premier élément clé de la diffusion en direct est l’utilisation d’un équipement adéquat. Je vais énumérer les catégories ici et vous donner des liens vers des ressources qui vous permettront d’en apprendre davantage sur ces sujets.

Appareil photo

Le premier équipement, et le plus important, est la caméra vidéo. Votre caméra peut être aussi simple qu’un smartphone ou aussi complexe qu’une caméra de cinéma haut de gamme. Le choix d’une caméra de diffusion en direct dépend de l’événement que vous envisagez de diffuser, du nombre de caméras nécessaires, etc. Vous pouvez commencer par un petit appareil, tel que le Canon FS300 ou le Sony DCR-HC1000. Si vous êtes déjà familiarisé avec la diffusion en continu HTML5, vous pouvez envisager d’utiliser une caméra PTZ (Pan-Tilt-Zoom).

Microphones

Vous aurez également besoin de microphones pour capturer le son. Des enquêtes ont montré que le son est un élément essentiel des flux vidéo en termes de qualité perçue. Vous pouvez utiliser le microphone intégré de vos caméras vidéo pour le son. Cependant, la qualité n’est pas toujours au rendez-vous et il faut faire attention aux bruits de fond. Envisagez d’utiliser des micros hors caméra de meilleure qualité, comme le Blue Yeti ou un micro canon dequalité , pourêtre sûr d’obtenir la meilleure qualité audio possible.

Encodeur

L’équipement suivant dont vous avez besoin est un encodeur. Il existe deux types d’encodeurs : le matériel et le logiciel.

Les encodeurs matériels sont idéaux pour les situations mobiles de type “run-and-gun” ou pour une utilisation en studio haut de gamme. Pour la plupart des autres utilisations, un logiciel d’encodage installé sur une tablette informatique ou un smartphone répondra probablement à tous vos besoins.

OBS Studio est une application de streaming en direct gratuite et performante. Cliquez ici pour en savoir plus sur les meilleures applications de streaming, dont OBS. Si vous préférez un encodeur matériel, découvrez le petit“Cube” de Teradek, monté sur une caméra, qui est idéal pour la diffusion d’émissions sportives.

2. Connectivité à l’internet

Une fois que vous aurez réglé vos besoins en équipement, vous devrez prévoir une connexion internet pour votre flux HTML5. Ce lien peut provenir de différentes sources. Vous pouvez utiliser :

• Un réseau Wi-Fi
• Un câble Ethernet
• Un réseau cellulaire (la 3G est trop lente ; vous aurez besoin d’une connexion 4G LTE)

Si vous travaillez dans un endroit où l’accès à l’internet est limité (ou si vous êtes mobile), il peut être difficile de compter sur ce type de connexions. La solution à ce problème est le“Network Bonding“, qui consiste à combiner plusieurs connexions réseau en une seule, plus rapide et plus fiable.

3. Exigences en matière de largeur de bande pour éviter la mise en mémoire tampon

Maintenant que vous pensez à votre connexion internet, vous devez tenir compte de sa vitesse. Si votre vitesse Internet est trop lente, la qualité de votre flux HTML5 en direct sera limitée. Cela peut également créer des problèmes de mise en mémoire tampon et de décalage de la vidéo. Seuls 8,2 % des internautes reviendront sur un site au cours de la première journée suivant l’échec d’une vidéo, contre 11,2 % après une expérience fonctionnelle.

La vitesse de l’internet est mesurée à l’aide de deux paramètres différents : la vitesse de téléchargement (download) et la vitesse de chargement (upload).

• Le téléchargement est la vitesse à laquelle vous pouvez charger des données sur vos appareils, comme regarder Netflix.
• Le téléchargement est la vitesse à laquelle vous pouvez envoyer des données vers le reste de l’internet, comme le téléchargement d’une vidéo sur Instagram.

Pour la production d’un flux en direct, la vitesse de téléchargement est le chiffre le plus important. Les vitesses de téléchargement vers l’amont et vers l’aval sont mesurées en Mbps, c’est-à-dire en mégabits par seconde. Comment mesurer votre vitesse de téléchargement ? Le moyen le plus simple est de visiter TestMy.net et d’effectuer leur test de vitesse de téléchargement. Notez vos résultats, puis revenez ici.

Quelle est votre vitesse de téléchargement ?

• 25 Mbps ou plus – vitesse suffisante, prêt pour le streaming 4K
• 5-8 Mbps – suffisant pour la lecture en continu en 720p ou 1080p HD (haute définition)
• 3 Mbps – suffisant pour un flux en définition standard 480p
• 1,5 Mbps – vitesse suffisante pour une résolution raisonnable de 360p
• 500 Kbps – vitesse la plus faible recommandée ; à peine suffisante pour diffuser une vidéo en continu

Ces chiffres ne sont que des recommandations. La quantité réelle de bande passante dont votre flux aura besoin dépend d’un certain nombre de facteurs. Pour en savoir plus sur la bande passante, consultez notre guide complet sur les exigences en matière de bande passante pour la diffusion en continu.

4. Réglages du codeur

Ensuite, nous verrons comment configurer votre encodeur pour obtenir la meilleure qualité avec le moins d’interruptions possible. Vous devrez adapter vos paramètres à vos besoins spécifiques, mais voici quelques recommandations concernant les paramètres courants des encodeurs :

Résolution vidéo

Les résolutions sont classées par taille, par exemple 640 x 360 pixels (souvent appelé 360p) ou 1920 x 1080 pixels (souvent appelé “Full HD” ou 1080p). En règle générale, choisissez la résolution la plus élevée que votre vitesse de téléchargement peut supporter.

Bitrate

Le débit binaire a une interaction avec la résolution. Des débits binaires plus élevés sont nécessaires pour “transporter” les données requises pour des tailles d’images vidéo plus importantes. Vous pouvez utiliser les chiffres de la section 3 pour obtenir une approximation de vos paramètres de débit.

Taux de rafraîchissement

En règle générale, nous vous recommandons d’opter pour une cadence de 30 images par seconde (ips). Si vous diffusez du sport, vous pouvez avoir besoin de 60 images par seconde.

Intervalle entre les images clés

Nous recommandons de régler l’intervalle entre les images clés sur 2-3 secondes.

5. Codecs vidéo et audio

Techniquement parlant, un “codec” est un outil matériel ou logiciel utilisé pour compresser ou décompresser la vidéo. H.264, par exemple, est un codec normalisé. Tous les appareils modernes, les navigateurs web, les lecteurs vidéo et les téléviseurs savent décoder la vidéo H.264.

Il en va de même pour l’audio. Le codec audio moderne le plus répandu est le codec AAC, qui comprime le son.

En cas de doute, utilisez H.264 et AAC pour tous vos besoins en matière de diffusion vidéo. Il est facile de s’y perdre. Par exemple, le son AAC peut être associé à une vidéo H.264 dans un “format de conteneur” pour la transmission. Pour maîtriser la diffusion en direct, il est utile de lire notre brève introduction à la norme H.264, aux codecs et aux fichiers conteneurs.

6. Lecteur vidéo pour tous les appareils

Un autre élément clé de la diffusion en continu HTML5 est le lecteur vidéo lui-même. Les vidéos Internet sont lues par des lecteurs vidéo, comme sur votre ordinateur de bureau. C’est simplement que ces lecteurs sont intégrés aux sites web que vous visitez. À l’époque, il fallait utiliser Flash pour la vidéo en ligne. Il était cependant lent et vulnérable au piratage.

Aujourd’hui, le streaming HTML5 est une bien meilleure alternative. Les plateformes de vidéo en ligne comme Dacast comprennent un lecteur vidéo HTML5 compatible avec tous les téléphones mobiles, tablettes et ordinateurs, ainsi qu’avec des appareils tels que les Smart TV. Pour en savoir plus sur les lecteurs de streaming vidéo HTML5 et les avantages qu’ils offrent, cliquez ici.

7. Plate-forme vidéo en ligne

Le dernier élément clé de la diffusion en continu HTML5 est une plateforme vidéo en ligne. Également appelées OVP, ces sociétés servent de mécanisme de diffusion pour vos flux vidéo. Un OVP permet d’accéder à un réseau de serveurs pour diffuser votre contenu dans le monde entier tout en réduisant au minimum les délais et la mise en mémoire tampon.

Ils fournissent également un certain nombre d’outils. Certains d’entre eux peuvent inclure des éléments tels que l’analyse pour vous aider à comprendre qui sont vos spectateurs et ce qu’ils font, monétisation pour vous aider à générer des revenus à partir de votre vidéo, des outils de gestion pour organiser votre contenu, et des outils avancés tels que API vidéo afin que vous puissiez créer des solutions personnalisées aux problèmes techniques.

Conclusion : passage en revue de l’installation

En conclusion, examinons ces éléments et la manière dont ils fonctionnent ensemble. Pour commencer la diffusion en continu HTML5, vous devez rassembler votre équipement : caméra, matériel audio et encodeur. Ensuite, vous devez vous connecter à Internet, puis vous assurer que votre connexion est suffisamment rapide pour permettre la diffusion en continu.

Une fois cette étape terminée, vous devez configurer votre encodeur en fonction de votre vitesse internet. Enfin, vous devez vous connecter à votre plateforme vidéo en ligne et vous assurer que vous utilisez un lecteur vidéo compatible avec le streaming HTML5.

C’est vraiment tout ce qu’il y a à faire ! Des questions ou des ajouts ? Dites-nous ce que vous en pensez dans la section des commentaires ! Merci de votre lecture et bonne chance pour vos diffusions en direct.