Comment intégrer un lecteur vidéo HTML5 sur votre site Web à l'aide du streaming adaptatif HLS et DASH

Adobe Flash Player a longtemps été utilisé comme principal lecteur vidéo sur Internet. Il a régné longtemps mais il est remplacé par des protocoles plus rapides, efficaces et facilitant la gestion des fichiers. Google Chrome a également commencé à bloquer Flash et mettra bientôt fin à sa prise en charge d'Adobe Flash. Il faudra peut-être un certain temps pour remplacer complètement ce protocole hérité, mais il apporte certainement ses avantages. Certains des navigateurs les plus récents ont des supports natifs pour HLS (HTTP Live Streaming).



HTML5 et HLS sont des protocoles open-source, ce qui signifie que tout le monde peut modifier son code et les utiliser sur son site Web, totalement gratuitement. L'encodage d'une vidéo dans plusieurs normes différentes de qualité de lecture, les sous-titres inclus et l'optimisation de la qualité de la vidéo en fonction de la bande passante sont rendus transparents avec le streaming vidéo HLS. En raison de HTML natif tag, le streaming HTML5 est inclus dans le code, ce qui facilite le streaming via HLS et DASH. DASH et HLS décomposent un flux vidéo en petits segments qui peuvent être utilisés pour un lecteur vidéo HTML5. Ils réduisent le temps dont vous disposez pour mettre en mémoire tampon une vidéo avant qu'elle ne commence à jouer et les problèmes de bégaiement que vous pourriez rencontrer en regardant un flux. Les avantages ne sont pas seulement limités au spectateur, mais s'étendent également au fournisseur de contenu.

Intégrez un lecteur vidéo HTML5 sur votre site Web à l'aide de JWPlayer

Avant de commencer, nous vous suggérons d'obtenir le JWPlayer de ici . Avec la montée en puissance de HLS et DASH utilisés à des fins de streaming adaptatif, de nombreux lecteurs vidéo sont apparus, ce qui offre certainement aux utilisateurs leur juste part d'avantages. JWPlayer est l'un de ces joueurs qui a résisté aux défis à maintes reprises et qui est utilisé par ESPN et Sony Pictures. Le téléchargement de contenu, l'intégration du lecteur vidéo sur HTML5, iOS, Android et Fire OS sont simplifiés grâce au code natif de JWPlayer que vous pouvez personnaliser pour une expérience utilisateur encore meilleure. Mais aujourd'hui, nous nous concentrons sur les lecteurs vidéo HTML5 et sur la façon dont vous pouvez utiliser HLS et DASH pour un meilleur streaming adaptatif.



Que propose JW Player?

En plus de vous fournir une plate-forme pour télécharger vos vidéos et les transformer en playlist, JWPlayer vous permet également de visualiser des statistiques en temps réel de vos vidéos téléchargées en vous donnant des rapports sur vos calendriers publicitaires et des rapports personnalisés.



Rapports personnalisés



JWPlayer facilite également la gestion de contenu pour votre site Web alimenté par CMS en vous permettant de gérer facilement les légendes, les vignettes, les métadonnées, etc. Par conséquent, l'utilisation et les avantages de JWPlayer vont au-delà du simple fait d'être un lecteur vidéo pour intégrer vos vidéos HTML5.

Télécharger des vidéos sur JWPlayer

Télécharger des vidéos

Avant de commencer à intégrer JWPlayer sur votre site Web HTML5, il est important de télécharger d'abord les vidéos respectives sur la plate-forme JWPlayer. Heureusement, ce n'est pas une tâche très complexe car tout ce que vous avez à faire est de sélectionner le fichier que vous souhaitez télécharger.



Une fois la vidéo téléchargée, vous pouvez commencer à éditer la section de métadonnées de cette vidéo, afficher les analyses et surveiller le trafic, etc.ou obtenir des sources pour HLS et télécharger des sous-titres codés à partir de l'onglet des actifs.

Personnalisation du lecteur vidéo HLS et DASH

Avant d'intégrer un lecteur vidéo, vous devez d'abord ajouter une bibliothèque de lecteurs à votre site. Il existe trois façons d'accomplir cet exploit. Auto-hébergé, hébergé sur le cloud et hébergé sur le cloud avec des appels d'API. La différence entre l'hébergement cloud et l'hébergement cloud avec des appels d'API repose simplement sur les appels d'API. Il est recommandé aux développeurs qui souhaitent gérer la mise en œuvre de leur lecteur vidéo via des appels d'API de l'utiliser. Pour les hébergeurs autonomes, la version du lecteur est entièrement contrôlée par vous. Il est important de noter que la licence du lecteur n’est pas tournée automatiquement et doit être effectuée manuellement lors de l’utilisation de l’auto-hôte.

Personnalisation du lecteur hébergé dans le cloud

Comme vous pouvez le voir ici, le lecteur hébergé dans le cloud peut être personnalisé et affiné à votre goût. Par exemple, le lecteur peut avoir une taille réactive ou une taille fixe. La lecture peut être réglée sur une boucle, mise en sourdine au démarrage, etc. En outre, vous pouvez également modifier la couleur par défaut du lecteur, les recommandations des vidéos et bien plus encore.

Une fois que vous avez tout cela, vous devez télécharger le code de la bibliothèque Cloud Hosted Player dans votre page Web. tag afin de permettre à JWPlayer d'être chargé sur votre site Web.

Intégration du lecteur vidéo

Par défaut, JWPlayer préfère automatiquement les moteurs multimédias HTML5, vous n'avez donc pas à vous soucier de définir une préférence principale. Cependant, certains cas peuvent vous demander de changer cela. Lorsque cela se produit, vous pouvez personnaliser le lecteur et le configurer à votre guise.

Une fois que vous avez téléchargé la bibliothèque de lecteurs hébergée dans le cloud sur la balise de votre page Web, l'étape suivante consiste à télécharger le code intégré. Commencez par créer un tag dans le où le JWPlayer doit apparaître. Appeler le installer() avec la propriété playlist pour appeler le joueur dans la cible .

Ci-dessous un exemple d'échantillon installer() code fourni par les développeurs JWPlayer eux-mêmes:

jwplayer ('myElement'). setup ({'playlist': 'https://example.com/myVideo.mp4