Il existe plusieurs façons d'ajouter du contenu multimédia à une page Web. Vous avez précédemment appris à utiliser la balise <video> standard. Dans cet article, vous découvrirez quelques-uns des frameworks multimédias (ou bibliothèques) 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. À la base, ils constituent un ensemble d'API compatibles avec la lecture audio et/ou vidéo pour différents formats de conteneurs et protocoles de transmission. Un bon framework possède une architecture modulaire et fournit une documentation claire et détaillée. Idéalement, il devrait également être relativement facile à configurer et à utiliser. Vous vous demandez peut-être : "Si le lecteur vidéo HTML5 propose déjà la plupart des fonctionnalités, pourquoi utiliser un framework ou une bibliothèque ?". C'est une excellente question, examinons-nous.
Avantages de l'utilisation d'un framework
Dans la plupart des situations qui vont au-delà des besoins d'une page Web de base, vous devrez utiliser un framework multimédia pour diffuser votre contenu. À moins que vous ne soyez prêt à développer et gérer un ensemble complet de fonctionnalités telles que la lecture hors connexion, le streaming, l'analyse, le Picture-in-picture, les vignettes 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-unes), vous devriez probablement décharger cette complexité dans une solution existante.
C'est là que les cadres médias entrent en jeu. Ils vous fournissent un ensemble de fonctionnalités et les conditions dans lesquelles vous pouvez les utiliser. Vous devez ensuite décider quel framework convient le mieux à votre projet. Dans le prochain article, nous verrons comment nous avons créé une PWA avec flux hors connexion qui met en œuvre plusieurs fonctionnalités complexes. Alerte spoiler : cette solution a demandé beaucoup de travail et elle est encore loin d'être une solution prête pour la production. Épargnez-vous les maux de tête en utilisant un cadre.
De nombreuses options s'offrent à vous. Pour l'instant, nous nous concentrerons sur trois d'entre elles : Shaka Player, JW Player et Video.js.
Lecteur Shaka
D'après la documentation, le lecteur Shaka de Google est une bibliothèque JavaScript Open Source pour les contenus multimédias adaptatifs. Elle 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 de IndexedDB. Le contenu peut être stocké dans n'importe quel navigateur. Le stockage des licences dépend de la compatibilité du navigateur.
Vous trouverez des instructions pour une utilisation de base sur le site de documentation du lecteur Shaka. 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, détectera 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 peuvent être chronophages et compliqués. Vous voudrez probablement décharger cette partie sur 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.
L'avantage de Shaka Player est qu'il existe également un outil fantastique et un SDK de packaging multimédia pour le packaging et le chiffrement DASH et HLS, appelé Shaka Packager. Il peut préparer et empaqueter du contenu multimédia pour la diffusion en ligne, ce que vous avez appris précédemment dans les sections Conversion multimédia et Chiffrement multimédia.
JW Player
Si vous recherchez une solution proposant des services d'hébergement et d'encodage/de transcodage, vous pouvez envisager d'utiliser JW Player, mais gardez à l'esprit que JW Player est un logiciel propriétaire. Cela signifie que vous n'avez pas beaucoup de contrôle sur la plate-forme ou la feuille de route. Il existe une version basique 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), les publicités interactives, la personnalisation de l'interface et les intégrations. Il existe une API et un SDK bien documentés. Toutefois, si vous cherchez un moyen rapide et sans frais d'héberger vos contenus multimédias, l'intégration de vidéos YouTube constitue généralement la meilleure option sans frais.
Video.js
Selon le site Web de l'entreprise, Video.js est entièrement conçu pour le HTML5. Il est compatible avec les vidéos HTML5 et les formats de streaming modernes tels que DASH et HLS, ainsi qu'avec YouTube et Vimeo. Il est compatible avec la lecture de vidéos sur les ordinateurs et les appareils mobiles, et offre un rendu optimal partout avec des skins basés sur CSS.
Il existe plusieurs façons d'utiliser Video.js, mais le plus simple consiste à utiliser la version de CDN sans frais fournie par Fastly. Pour en savoir plus sur la configuration du lecteur, consultez la page Premiers pas. Video.js est un lecteur vidéo très puissant. À l'instar de Shaka Player, vous devez également héberger et encoder votre vidéo. Cependant, le système de plug-ins 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 découvrir ce qui existe. Lorsque vous choisissez un framework, vous devez tenir compte des fonctionnalités dont vous avez besoin pour le projet et de la manière dont vous prévoyez d'héberger et 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 ? Quelle est la taille de votre budget ? Ou pour tout autre nombre de considérations. Faites des recherches et demandez des suggestions aux membres de votre réseau. Il existe des dizaines d'autres options intéressantes et, avant de faire un choix, prenez le temps d'en choisir une qui convient à votre équipe et d'éviter de créer des dettes techniques inutiles ou une complexité à maintenir pendant le cycle de vie du projet.
Nous allons maintenant nous intéresser à la PWA avec streaming hors connexion, que nous avons conçue pour 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 gérer la majeure partie du travail.