Il existe plusieurs façons d'ajouter du contenu multimédia à une page Web. Vous avez précédemment appris à utiliser le tag <video> standard. Dans cet article, vous découvrirez quelques frameworks (ou bibliothèques) multimédias disponibles que vous pouvez utiliser pour étendre ou remplacer le comportement du lecteur vidéo HTML5 par défaut.
Les frameworks multimédias sont à la fois propriétaires et Open Source. Ils sont constitués d'un ensemble d'API compatibles avec la lecture audio et/ou vidéo pour divers formats de conteneurs et protocoles de transmission. Un bon framework est doté d'une architecture modulaire et fournit une documentation claire et détaillée. Idéalement, il doit également être relativement facile à configurer et à utiliser. Vous vous demandez peut-être : "Si le lecteur vidéo HTML5 offre déjà la plupart des fonctionnalités, pourquoi utiliser un framework ou une bibliothèque ?" C'est une excellente question, allons-y.
Avantages d'utiliser un framework
Dans la plupart des cas allant au-delà des besoins d'une page Web de base, vous allez avoir besoin d'utiliser un framework multimédia pour diffuser votre contenu. Si vous n'êtes pas en mesure de développer et de gérer un ensemble de fonctionnalités complet comme la lecture hors connexion, le streaming, l'analyse, le Picture-in-picture, les miniatures d'aperçu, l'intégration et la monétisation (optimisation du taux de remplissage, calendrier de diffusion des annonces ou enchères d'en-tête, pour n'en citer que quelques-uns), vous devriez probablement vous décharger de cette complexité au profit d'une solution existante.
C'est là que les cadres médias entrent en jeu. Ils vous fournissent un ensemble de fonctionnalités et des conditions dans lesquelles vous pouvez les utiliser. Vous devez ensuite choisir le framework le plus adapté à votre projet. Dans le prochain article, nous verrons comment nous avons créé une PWA avec streaming hors connexion qui implémente plusieurs fonctionnalités complexes. Pour révéler l'intrigue, cela demandait beaucoup de travail et est encore loin d'être une solution prête pour la production. Épargnez-vous un casse-tête en utilisant un framework.
De nombreuses options s'offrent à vous. Pour l'instant, nous nous concentrerons sur trois d'entre elles : Shaka Player, JW Player et Video.js.
Shaka Player
D'après la documentation, le lecteur Shaka Player de Google est une bibliothèque JavaScript Open Source pour les contenus multimédias adaptatifs. Il lit les formats multimédias adaptatifs (tels que DASH et HLS) dans un navigateur, sans utiliser de plug-ins. À la place, Shaka Player utilise les normes Web ouvertes MediaSource Extensions et Encrypted Media Extensions.
Shaka Player prend également en charge le stockage et la lecture hors connexion de contenus multimédias à l'aide d'IndexedDB. Le contenu peut être stocké dans n'importe quel navigateur. Le stockage des licences dépend de la compatibilité des navigateurs.
Vous trouverez des instructions pour une utilisation de base sur le site de documentation de Shaka Player. Toutefois, en résumé, pour utiliser Shaka Player, vous devez d'abord créer une page HTML avec un élément vidéo ou audio. Ensuite, dans le code JavaScript de votre application, installez les polyfills et vérifiez la compatibilité du navigateur. Une fois que le navigateur a confirmé la compatibilité avec Shaka Player, un script crée un objet "Player" pour encapsuler l'élément multimédia, écouter les erreurs, puis charger un fichier manifeste. Shaka Player prendra le relais à partir de là.
Avec Shaka, vous devrez héberger et encoder vous-même vos fichiers multimédias. La création d'un serveur multimédia n'est pas trop complexe, mais l'encodage/le transcodage de contenus multimédias peut prendre du temps et s'avérer compliqué. Vous souhaiterez probablement décharger cette partie vers un service tel que Zencoder, Amazon Elastic Encoder ou l'API Google Transcoder pour automatiser les tâches répétitives et accélérer le processus.
Shaka Player est également doté d'un outil et d'un SDK de packaging multimédia vraiment fantastiques pour le packaging et le chiffrement DASH et HLS. Il s'agit de Shaka Packager. Il peut préparer et empaqueter du contenu multimédia pour le streaming en ligne, que vous avez découvert précédemment dans les sections Conversion multimédia et Chiffrement multimédia.
JW Player
Si vous recherchez une option fournissant des services d'hébergement et d'encodage/de transcodage, vous pouvez vous tourner vers JW Player, mais gardez à l'esprit que JW Player est un logiciel propriétaire. Autrement dit, vous avez peu de contrôle sur la plate-forme ou la feuille de route. Il existe une version de base sans frais, dans laquelle les vidéos sont affichées avec un filigrane, et une version commerciale.
JW Player prend en charge le streaming avec MPEG-DASH (version payante uniquement), la gestion des droits numériques (DRM) (avec Vualto), la publicité interactive, la personnalisation de l'interface et les intégrations. Il existe une API et un SDK bien documentés. Toutefois, si vous recherchez simplement un moyen rapide et sans frais d'héberger votre contenu multimédia, l'intégration de vidéos YouTube est généralement la meilleure option sans frais.
Video.js
D'après son site Web, la bibliothèque Video.js est conçue de A à Z pour les environnements HTML5. Il est compatible avec les vidéos HTML5 et les formats de streaming modernes tels que DASH et HLS, YouTube et Vimeo. Elle est compatible avec la lecture de vidéos sur les ordinateurs et les appareils mobiles, et son apparence est optimisée avec les skins basés sur CSS.
Il existe plusieurs façons d'utiliser Video.js, mais la plus simple consiste à utiliser la version CDN sans frais fournie par Fastly. Pour savoir comment configurer le lecteur, consultez la page Premiers pas. Video.js est un lecteur vidéo très puissant. Comme le lecteur Shaka, vous devez héberger et encoder votre vidéo. Cependant, l'une des différences réside dans le système de plug-ins, qui vous permet, par exemple, de lire des vidéos YouTube dans le lecteur Video.js, qui peut également être personnalisé.
Autres supports
Il existe de nombreux frameworks et bibliothèques différents. Cet article ne fait que survoler le sujet. Lorsque vous choisissez un framework, vous devez prendre en compte les fonctionnalités dont vous avez besoin pour le projet, et la manière dont vous envisagez d'héberger, d'encoder ou de transcoder votre contenu multimédia. Avez-vous besoin d'annonces pré-roll ou d'autres stratégies de monétisation ? Vos contenus multimédias seront-ils disponibles hors connexion ? Quel est le montant de votre budget ? Ou tout autre nombre de considérations. Faites vos recherches et demandez aux personnes de votre réseau de vous faire des suggestions. Il existe des dizaines d'autres options intéressantes. Avant de prendre votre décision, prenez le temps d'en choisir une qui conviendra à votre équipe et d'éviter de créer des dettes techniques inutiles ou une complexité à maintenir pendant le cycle de vie du projet.
Vous allez ensuite découvrir les PWA avec streaming hors connexion que nous avons conçues pour vous montrer comment aborder et relever les principaux défis liés au déploiement de votre propre solution en utilisant uniquement l'objet vidéo HTML5 sans framework pour supporter la charge de travail.