Dans cet article, vous allez découvrir le concept plus avancé du streaming multimédia. À la fin, vous devriez avoir une bonne compréhension des différents cas d'utilisation, protocoles et extensions de streaming. Commençons par expliquer ce qu'est réellement le streaming.
Le streaming multimédia est un moyen de diffuser et de lire des contenus multimédias par morceaux. Au lieu de charger un seul fichier, ce qui peut être lent s'il n'est pas optimisé pour le réseau, le lecteur lit un fichier manifeste décrivant comment le contenu multimédia cible est divisé en blocs de données individuels. Les segments multimédias sont ensuite recousus de manière dynamique au moment de l'exécution, probablement à différents débits, que vous découvrirez plus tard.
N'oubliez pas que pour diffuser du contenu en streaming sur votre site Web, le serveur doit prendre en charge l'en-tête de requête HTTP Range. Pour en savoir plus sur l'en-tête Accept-Ranges
, consultez l'article Balises <video> et <source>.
Cas d'utilisation du streaming
La production de segments multimédias et des fichiers manifestes nécessaires décrivant le flux n'est pas tout à fait simple, mais le streaming ouvre des cas d'utilisation intéressants qui ne sont pas possibles simplement en pointant un élément <video>
vers un ensemble de fichiers sources statiques. Vous découvrirez comment ajouter des contenus multimédias à une page Web dans une section ultérieure. Tout d'abord, vous devez connaître quelques cas d'utilisation du streaming multimédia si vous souhaitez aller plus loin que le simple chargement de plusieurs fichiers dans l'élément <video>
.
- Le streaming adaptatif consiste à encoder les segments multimédias dans plusieurs débits. Le segment multimédia de la plus haute qualité qui correspond à la bande passante actuellement disponible du client est renvoyé au lecteur multimédia.
- La diffusion en direct consiste à encoder et à mettre à disposition des segments multimédias en temps réel.
- L'injection de contenu multimédia consiste à injecter d'autres contenus multimédias, comme des annonces, dans un flux sans que le lecteur ait à modifier la source multimédia.
Protocoles de streaming
Les deux protocoles de streaming les plus couramment utilisés sur le Web sont le streaming adaptatif dynamique sur HTTP (DASH) et le streaming HTTP en direct (HLS). Les lecteurs compatibles avec ces protocoles récupèrent le fichier manifeste généré, déterminent les segments multimédias à demander, puis les combinent dans l'expérience multimédia finale.
Utiliser <video>
pour lire un flux
De nombreux navigateurs ne diffusent pas votre flux en mode natif. Bien que la lecture HLS soit nativement compatible, les navigateurs ne sont généralement pas compatibles avec la lecture en streaming DASH native. Par conséquent, il n'est souvent pas suffisant de simplement diriger le <source>
dans l'élément <video>
vers un fichier manifeste.
<video controls>
<source src="manifest.mpd" type="application/dash+xml">
</video>
Ce qui peut sembler être un déficit est en réalité une force déguisée. Les flux sont puissants, et les applications qui les consomment ont des besoins différents.
Les fichiers manifestes décrivent généralement de nombreuses variantes d'un même contenu multimédia. Il peut s'agir de différents débits, de plusieurs pistes audio et même du même contenu multimédia encodé dans différents formats.
Certaines applications peuvent vouloir conserver une plus grande quantité de vidéos dans le tampon, d'autres peuvent vouloir précharger les premières secondes d'un épisode à venir, et d'autres peuvent vouloir implémenter leur propre logique pour le streaming adaptatif. C'est là que vous auriez besoin d'une sorte de fonctionnalité de navigateur intégrée pour générer des flux multimédias à lire. Il se trouve qu'il en existe une.
Extensions de source multimédia
Heureusement, le W3C a défini les extensions de source multimédia (MSE) qui permettent à JavaScript de générer nos flux multimédias. En résumé, le MSE permet aux développeurs d'associer un objet MediaSource
à un élément <video>
et de le lire quelle que soit la donnée multimédia injectée dans les tampons associés à l'instance MediaSource
.
Exemple de base
const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
'sourceopen',
() => {
const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
const buffer = mediaSource.addSourceBuffer(mimeString);
buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
}
);
L'exemple simplifié ci-dessus illustre plusieurs points:
- Pour
<video>
, il reçoit des données multimédias à partir d'une URL. - L'URL générée n'est qu'un pointeur vers une instance
MediaSource
. - L'instance
MediaSource
crée une ou plusieurs instancesSourceBuffer
. - Nous ajoutons ensuite des données multimédias binaires dans le tampon, par exemple à l'aide de
fetch
.
Bien que ces concepts de base soient simples et qu'il soit tout à fait possible d'écrire un lecteur vidéo compatible avec DASH et HLS à partir de zéro, la plupart des utilisateurs choisissent généralement l'une des solutions Open Source matures déjà disponibles, comme Shaka Player, JW Player ou Video.js, pour n'en citer que quelques-unes.
Toutefois, nous avons créé une PWA multimédia de démonstration appelée Kino qui montre comment développer votre propre site Web multimédia de streaming de base qui permet la lecture multimédia hors connexion à l'aide de l'élément <video>
simple. Notre feuille de route prévoit de prendre en charge les frameworks et la gestion des droits numériques, entre autres fonctionnalités. Consultez régulièrement cette page pour vous tenir informé ou demandez une fonctionnalité.
Pour en savoir plus, consultez l'article PWA avec streaming hors connexion.
Format des segments multimédias
Pendant longtemps, DASH et HLS nécessitaient que les segments multimédias soient encodés dans différents formats. Toutefois, en 2016, la compatibilité avec les fichiers MP4 fragmentés (fMP4) standards a été ajoutée à HLS, un format également compatible avec DASH.
Les segments vidéo utilisant le conteneur fMP4
et le codec H.264
sont compatibles avec les deux protocoles et peuvent être lus par une grande majorité de lecteurs. Cela permet aux producteurs de contenus d'encoder leurs vidéos une seule fois, ce qui fait gagner du temps et de l'espace disque.
Pour obtenir une meilleure qualité et des tailles de fichiers plus faibles, vous pouvez choisir d'encoder plusieurs ensembles de segments multimédias à l'aide de formats plus efficaces tels que VP9
. Toutefois, avant d'aller plus loin, vous devez d'abord apprendre à préparer des fichiers multimédias pour le Web.