Il existe plusieurs façons d'ajouter des contenus multimédias à une page Web. Vous avez précédemment appris à utiliser la balise <video> standard. Dans cet article, vous allez découvrir 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 existent en versions propriétaires et Open Source. Au cœur de ces frameworks se trouve un ensemble d'API compatibles avec la lecture audio et/ou vidéo pour divers formats de conteneur et protocoles de transmission. Un bon framework présente une architecture modulaire et fournit une documentation claire et détaillée. Dans l'idéal, il doit également être relativement facile à configurer et à utiliser. Vous vous demandez peut-être : "Si le lecteur vidéo HTML5 fournit déjà la plupart des fonctionnalités, pourquoi utiliser un framework ou une bibliothèque ?" C'est une excellente question. Découvrons cela plus en détail.
Avantages d'utiliser un framework
Dans la plupart des cas, lorsque les besoins dépassent ceux d'une page Web de base, vous devez utiliser un framework multimédia pour diffuser votre contenu. Sauf si vous êtes prêt à développer et à gérer un ensemble de fonctionnalités riche, comme la lecture hors connexion, le streaming, les données analytiques, le mode Picture-in-picture, les miniatures d'aperçu, l'intégration et la monétisation (optimisation du taux de remplissage, planification des annonces ou enchères par en-tête, par exemple), vous devriez probablement déléguer cette complexité à une solution existante.
C'est là que les frameworks multimédias entrent en jeu. Ils vous fournissent un ensemble de fonctionnalités et les conditions dans lesquelles vous pouvez les utiliser. Vous devez ensuite choisir le framework adapté à votre projet. Dans l'article suivant, nous verrons comment nous avons créé une PWA avec streaming hors connexion qui implémente plusieurs fonctionnalités complexes. Alerte spoiler : cela a demandé beaucoup de travail et la solution n'est toujours pas prête pour la production. Épargnez-vous des maux de tête et utilisez un framework.
De nombreuses options sont disponibles. Pour l'instant, cet article se concentre sur trois d'entre elles : Shaka Player, JW Player et Video.js.
Shaka Player
Selon la documentation, le Shaka Player de Google est une bibliothèque JavaScript Open Source pour les médias adaptatifs. Il lit des 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 est également compatible avec le stockage et la lecture hors connexion des 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é du navigateur.
Vous trouverez des instructions pour une utilisation de base sur le site de documentation de Shaka Player. Cependant, 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, vous installez les polyfills et vérifiez la compatibilité du navigateur. Une fois que le navigateur a confirmé la prise en charge de 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 va se charger du reste.
Avec Shaka, vous devez héberger et encoder vous-même vos fichiers multimédias. La création d'un serveur multimédia n'est pas particulièrement complexe, mais l'encodage/le transcodage de contenus multimédias peut être long et compliqué. Vous devrez probablement déléguer cette partie à 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 du lecteur Shaka est qu'il propose également un outil et un SDK de packaging multimédia très intéressants pour le packaging et le chiffrement DASH et HLS, appelés Shaka Packager. Il peut préparer et empaqueter des contenus multimédias pour la diffusion en streaming en ligne, comme vous l'avez vu précédemment dans les sections Conversion multimédia et Chiffrement multimédia.
JW Player
Si vous recherchez une option qui fournit des services d'hébergement et d'encodage/de transcodage, vous pouvez envisager JW Player, mais gardez à l'esprit qu'il s'agit d'un logiciel propriétaire. Autrement dit, vous n'avez pas beaucoup de contrôle sur la plate-forme ni sur la feuille de route. Il existe une version sans frais de base, dans laquelle les vidéos sont diffusées avec un filigrane, et une version commerciale.
JW Player est compatible avec le streaming avec MPEG-DASH (version payante uniquement), la gestion des droits numériques (DRM, Digital Rights Management) (avec Vualto), la publicité interactive, la personnalisation de l'interface et l'intégration. Une API et un SDK bien documentés sont disponibles. Toutefois, si vous recherchez simplement un moyen rapide et sans frais d'héberger vos contenus multimédias, l'intégration de vidéos YouTube est généralement la meilleure option sans frais.
Video.js
Selon son site Web, Video.js est conçu à partir de zéro pour un monde HTML5. Il est compatible avec la vidéo HTML5 et les formats de streaming modernes tels que DASH et HLS, ainsi qu'avec YouTube et Vimeo. Il est compatible avec la lecture vidéo sur les ordinateurs et les appareils mobiles, et s'affiche partout avec des 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 avec Shaka Player, vous devrez également héberger et encoder votre vidéo. Cependant, le système de plug-in offre des fonctionnalités supplémentaires, comme la lecture de vidéos YouTube dans le lecteur Video.js, qui peut également être personnalisé.
Autres frameworks
Il existe de nombreux frameworks et bibliothèques différents. Cet article ne fait qu'effleurer la surface de 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 façon dont vous prévoyez d'héberger et d'encoder ou de transcoder vos contenus multimédias. 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 d'autres considérations. Faites des recherches et demandez des suggestions aux membres de votre réseau. Il existe des dizaines d'autres excellentes options. Avant de faire un choix, prenez le temps de choisir celle qui convient le mieux à votre équipe et évitez de créer une dette technique ou une complexité inutile à gérer pendant le cycle de vie du projet.
Vous allez ensuite découvrir la PWA avec streaming hors connexion que nous avons créée pour vous montrer comment aborder et relever les principaux défis liés au déploiement de votre propre solution à l'aide de l'objet vidéo HTML5 sans framework pour gérer les tâches lourdes.