Extensions de source multimédia HTML5 : apporter la vidéo de production sur le Web

Publié: 2022-03-10
Résumé rapide ↬ Au cours de la dernière décennie, des plugins tels que Flash et Silverlight ont permis une riche consommation de vidéo dans les navigateurs, alimentant des services populaires tels que YouTube et Netflix. Cependant, cette approche s'est déplacée vers HTML5 au cours des dernières années. Il y a près de deux ans, le W3C a publié la recommandation finale de la spécification HTML5, accompagnée d'un nouvel ensemble d'éléments HTML et d'API, en particulier pour la vidéo. Certains d'entre eux visent plus de sémantique dans les pages Web mais n'introduisent pas de nouvelles fonctionnalités. D'autres étendent les possibilités du Web et améliorent les possibilités pour les développeurs sans avoir besoin de plugins tels qu'Adobe Flash, Microsoft Silverlight ou Java.

Au cours de la dernière décennie, des plugins tels que Flash et Silverlight ont permis une riche consommation de vidéo dans les navigateurs, alimentant des services populaires tels que YouTube et Netflix. Cependant, cette approche s'est déplacée vers HTML5 au cours des dernières années.

Il y a près de deux ans, le W3C a publié la recommandation finale de la spécification HTML5, accompagnée d'un nouvel ensemble d'éléments HTML et d'API, en particulier pour la vidéo. Certains d'entre eux visent plus de sémantique dans les pages Web mais n'introduisent pas de nouvelles fonctionnalités. D'autres étendent les possibilités du Web et améliorent les possibilités pour les développeurs sans avoir besoin de plugins tels qu'Adobe Flash, Microsoft Silverlight ou Java.

Lectures complémentaires sur SmashingMag :

  • Fournir une expérience native avec les technologies Web
  • Faire un polyfill complet pour l'élément de détails HTML5
  • Guide du débutant sur les applications Web progressives
  • Le logo HTML5 : qu'en pensez-vous ?

Ceci est particulièrement important car, par exemple, Google a annoncé la suppression de NPAPI (une API utilisée par ces plugins), tout comme Firefox, et Microsoft préconise une navigation sans plugin. Bien que ces fournisseurs fournissent toujours un lecteur Flash, ce n'est probablement qu'une question de temps avant qu'ils ne le fassent pas. De plus, les navigateurs sur les appareils mobiles vont au-delà car la plupart d'entre eux ne prennent pas en charge les plugins et n'ont pas de lecteur Flash.

Plus après saut! Continuez à lire ci-dessous ↓

Examinons quelques-uns des nouveaux éléments HTML5 et ce qu'ils améliorent pour la vidéo :

  • <canvas> fournit des scripts pour afficher des graphiques, des graphiques de jeu et plus encore. Ceci est parfois appelé l'API Canvas JavaScript. L'élément canvas peut également être utilisé avec WebGL pour rendre des graphiques 2D et 3D, en utilisant le GPU de la carte graphique.
  • <video> permet une lecture de vidéo prête à l'emploi, ce qui est vraiment génial. Cela fait enfin du multimédia sans plugin sur le Web une réalité. En fait, les fournisseurs de navigateurs semblent s'accorder sur un seul format - MPEG-4/H.264, qui est universellement pris en charge dans les navigateurs modernes, à l'exception notable d'Opera Mini.
  • <audio> active la lecture prête à l'emploi du contenu audio sur une page Web. Comme pour la vidéo, la décision des formats de conteneur et des codecs à prendre en charge est laissée aux fournisseurs de navigateurs.
  • <track> peut être utilisé pour les pistes de texte chronométrées, telles que les sous-titres et les légendes d'une vidéo. Les fichiers WebVTT sont pris en charge par défaut.

La plupart des nouveaux éléments sont connus et utilisés depuis un certain temps dans le code du lecteur vidéo HTML5 car ils sont implémentés dans tous les navigateurs modernes. La spécification est stable. Pourtant, le W3C a encore beaucoup de travail à faire.

Pour moi, la norme la plus importante sur laquelle travaille le W3C est la norme « Media Source Extensions » (MSE), qui a actuellement le statut de « Candidate Recommendation ». Cette API JavaScript nous permet de générer des flux multimédias pour les éléments <video> , <audio> et d'autres éléments, permettant des normes de streaming adaptatives telles que MPEG-DASH en pur HTML5 et JavaScript.

Une autre intéressante est la norme « Encrypted Media Extensions », qui permet la lecture de contenu protégé en HTML5 et JavaScript. Cependant, il s'agit actuellement d'un "projet de travail" et il faudra un certain temps pour le finaliser.

Nous accueillons favorablement la nouvelle norme et attendons avec impatience le moment où nous n'aurons plus besoin d'un lecteur ou d'un plug-in Flash, où le multimédia pourra être visionné sur pratiquement n'importe quel appareil avec une seule implémentation.

Pourquoi MPEG-DASH ?

Examinons le format de streaming MPEG-DASH et pourquoi il est utilisé dans HTML5. MPEG-DASH (le DASH étant l'abréviation de diffusion adaptative dynamique sur HTTP) est une norme internationale indépendante des fournisseurs ratifiée par MPEG et ISO (ISO/IEC 23009-1). Les technologies de streaming adaptatif précédentes, telles que Apple HLS, Microsoft Smooth Streaming et Adobe HDS, ont été lancées par des fournisseurs avec une prise en charge limitée des serveurs de streaming indépendants ou des clients de lecture. Une situation dépendante du fournisseur n'était clairement pas souhaitable, et les organismes de normalisation ont donc lancé un processus d'harmonisation, aboutissant à la ratification de MPEG-DASH en 2012.

Voici en quelques mots les objectifs et les avantages de MPEG-DASH :

  • Réduisez les délais de démarrage ainsi que la mise en mémoire tampon et les blocages pendant la lecture vidéo.
  • Poursuivre l'adaptation à la situation de la bande passante du client.
  • Utilisez une logique de streaming basée sur le client pour permettre une évolutivité et une flexibilité maximales.
  • Utilisez des CDN, des proxies et des caches existants et rentables basés sur HTTP.
  • Contournez efficacement les NAT et les pare-feu grâce à l'utilisation de HTTP.
  • Activez le chiffrement commun via la signalisation, la livraison et l'utilisation de plusieurs schémas DRM simultanés à partir du même fichier.
  • Activez le raccordement simple et l'insertion d'annonces (ciblées).
  • Soutenez efficacement le "mode astuce".
  • Et beaucoup plus!

Ces dernières années, MPEG-DASH a été intégré dans de nouveaux efforts de normalisation, tels que les MSE HTML5, qui permettent la lecture DASH via les balises video et audio HTML5, ainsi que les extensions multimédias cryptées HTML5, qui permettent une lecture protégée par DRM dans les navigateurs Web. . De plus, la protection DRM avec MPEG-DASH est harmonisée sur différents systèmes avec MPEG-CENC (pour le cryptage commun); et la lecture MPEG-DASH sur différentes plates-formes de télévision intelligente est activée via l'intégration avec Hybrid Broadcast Broadband TV (HbbTV 1.5 et HbbTV 2.0).

De plus, l'utilisation de la norme MPEG-DASH a été simplifiée par les efforts de l'industrie autour du DASH Industry Forum et ses recommandations DASH-AVC/264, ainsi que par des initiatives tournées vers l'avenir telles que la recommandation DASH-HEVC/265 sur l'utilisation de H.265/HEVC dans MPEG-DASH.

Écosystème de normes de diffusion vidéo
Écosystème de normes de streaming vidéo (Image : Bitcodin) (Voir la version agrandie)

Aujourd'hui, MPEG-DASH se déploie de plus en plus, accéléré par des services tels que Netflix et Google, qui sont récemment passés à cette nouvelle norme. Avec ces deux sources majeures de trafic, MPEG-DASH représente déjà 50% du trafic Internet total.

Comment fonctionnent les MSE ?

Examinons maintenant les détails des MSE et comment ils peuvent être utilisés par les développeurs. Les MSE sont une spécification qui étend le HTMLMediaElement pour permettre à JavaScript de construire dynamiquement des flux multimédias pour les balises audio et video . Ce n'était pas possible auparavant car ces balises ne pouvaient accéder qu'aux fichiers complets (c'est-à-dire aux fichiers MP4). Cette approche est également appelée streaming progressif, ou téléchargement progressif, car les fichiers multimédias sont téléchargés et lus en même temps, ce qui permet le pseudo-streaming.

Cependant, cela entraîne une faible capacité de recherche et aucune possibilité d'adapter la qualité vidéo et audio à la situation de la bande passante de l'utilisateur. En construisant des flux multimédias en JavaScript en tant qu'entrées pour les balises audio et video , les développeurs peuvent désormais adapter dynamiquement un flux multimédia au contexte de l'utilisateur, améliorant ainsi l'expérience de diffusion en continu.

Comme mentionné, MPEG-DASH est le format de streaming de choix pour les MSE. Examinons donc les étapes nécessaires pour créer un lecteur vidéo basé sur HTML5 MSE :

  1. Téléchargez et analysez le fichier manifeste - appelé MPD dans MPEG-DASH - qui décrit les détails du flux vidéo, tels que le nombre de niveaux de qualité et de résolutions du flux vidéo, les langues audio et les sous-titres, ainsi que le nom des segments multimédias et fichiers sur le serveur d'origine basé sur HTTP ou CDN.
  2. Estimez la bande passante disponible sur l'appareil client, choisissez la qualité vidéo appropriée pour obtenir une diffusion sans tampon et téléchargez les segments multimédias en JavaScript.
  3. Remettez les segments multimédias téléchargés au tampon MSE en JavaScript.
  4. Décodez et affichez la vidéo via la balise video , généralement dans le matériel.

C'est ainsi que fonctionnent les lecteurs de streaming adaptatifs basés sur HTML5, tels qu'utilisés par Netflix et YouTube. Il existe déjà des solutions assez matures, ce qui permet aux développeurs et aux fournisseurs de contenu de passer facilement au streaming à débit binaire adaptatif en HTML5, comme le projet open source DASH-IF dash.js et le lecteur Bitdash HTML5.

La génération de contenu MPEG-DASH est également simple et prise en charge par des outils open source tels que x264 et MP4Box, ainsi que par des services d'encodage commerciaux tels que Bitcodin.

Cependant, l'utilisation des MSE n'est pas limitée à MPEG-DASH. De plus en plus de projets (y compris hls.js) et de lecteurs (y compris Bitdash) prennent en charge le format HLS d'Apple en HTML5 en utilisant les MSE. Pour ce faire, ils transmultiplexent les segments multimédias HLS - qui sont des conteneurs MPEG2-TS - au format de fichier multimédia de base ISO requis par HTML5 et MPEG-DASH.

Extensions multimédias cryptées pour DRM

Des changements majeurs se produisent actuellement sur le marché des DRM, causés par la chute imminente des plugins NPAPI - tels que Silverlight, qui a conduit à la suppression du principal système DRM, PlayReady - de Chrome et Firefox. Cela place presque tous les fournisseurs de contenu premium dans une situation difficile car ils devront changer de technologie et trouver une solution pérenne.

Les éditeurs de médias en streaming premium ne pourront pas compter sur le DRM PlayReady de Microsoft pour sécuriser leur contenu dans Chrome et Firefox sur les appareils PC et Android. Ils devront réévaluer leur stratégie de protection de contenu et de plate-forme de streaming et devront trouver une solution à l'épreuve du temps, puis changer de technologie sous peu.

Pour de nombreux fournisseurs de contenu, MPEG-DASH est devenu la technologie de choix. Les projets DASH se sont déployés à un rythme accéléré, et les MSE et Encrypted Media Extensions (EME) avec Widevine DRM semblent être l'alternative la plus viable. En outre, MPEG-CENC permet de prendre en charge des systèmes DRM distincts avec une seule version de contenu protégé, et les EME sont basés sur les MSE pour le contenu basé sur MPEG-DASH.

Ainsi, cette combinaison de différents systèmes DRM - par exemple, Widevine Modular pour Chrome et Android, Microsoft PlayReady pour Internet Explorer et Edge et Adobe's Primetime pour Firefox - pour une version d'un élément de contenu donne aux fournisseurs de contenu une incitation supplémentaire à passer au MPEG -DASH en tant que norme internationale, compte tenu de sa flexibilité avec le streaming, les DRM et les CDN.

Prise en charge du navigateur pour les MSE et les EME

Après quelques années d'adoption lente par les fournisseurs de navigateurs de HTML5 et des MSE en particulier, nous voyons maintenant une majorité d'entre eux le prendre en charge. Cela vaut également pour les EME, bien que dans ce cas, chaque fournisseur opte pour un système DRM différent et que l'écosystème soit un peu plus différencié.

Cependant, pour atteindre 99 % des utilisateurs, nous devons avoir une configuration de streaming vidéo qui prend également en charge les navigateurs qui ne prennent pas en charge les MSE, en particulier les anciennes versions de navigateur et Safari sur iOS. Les anciens navigateurs peuvent être servis facilement à l'aide d'un lecteur basé sur Flash, qui peut lire le même contenu MPEG-DASH que celui utilisé par les MSE, comme indiqué par le lecteur Bitdash. Pour prendre en charge les appareils iOS, nous devons utiliser le format de diffusion en continu d'Apple, appelé HLS, qu'Apple rend obligatoire pour HTML5. Les normes ouvertes telles que les MSE ne sont pas prises en charge par Apple, bien qu'elles soient prises en charge sur Safari sous OS X.

La matrice suivante donne un aperçu de l'état actuel de la prise en charge de MSE et EME sur les navigateurs et les plates-formes (avec l'aimable autorisation de Bitmovin) :

Environnement Technologie du lecteur Médias GDN
Chrome MSE HTML5 MPEG-DASH Widevine Modulaire
Internet Explorer 11 Windows 8.1 MSE HTML5 MPEG-DASH PlayReady
Internet Explorer (autre) Flash, lumière argentée MPEG-DASH ClearKey, PlayReady
Bord HTML5 MSE, HTML5 HLS MPEG-DASH, HLS PlayReady, AES HLS
Firefox MSE HTML5 MPEG-DASH Adobe
Safari HTML5 MSE, HTML5 HLS MPEG-DASH, HLS Fair-play, AES
Androïd : Internet > v4.1 HTML5 MSE, HTML5 HLS MPEG-DASH, HLS Widevine Modulaire
Androïd : application L'Explayer de Google MPEG-DASH, HLS Widevine Modulaire
iOS : Internet HTML5 HLS HLS AES
iOS : application prise en charge native de HLS HLS Fair-play, AES
Smart TV Prise en charge native MPEG-DASH ou HTML5 MSE (par exemple Tizen) MPEG-DASH ou HLS Dépend de l'appareil
HbbTV (1.5) prise en charge native de MPEG-DASH MPEG-DASH dépendant de l'appareil

L'avenir de la vidéo HTML5

Les nouveaux codecs multimédias font leur entrée sur le marché, rendant la compression vidéo encore plus efficace, ce qui est particulièrement important pour les formats de qualité supérieure tels que 4K et UHD et pour le streaming sur les appareils mobiles. Le codec le plus courant est HEVC/h.265 , qui pourrait être le codec par défaut dans quelques années (si la situation des brevets ne gâche pas cela). Et il utilisera également les MSE intégrés du navigateur pour la lecture et utilisera MPEG-DASH comme format de diffusion, ce qui montre la flexibilité de cette norme ouverte.

Les développeurs de lecteurs vidéo n'ont qu'à effectuer quelques adaptations simples, comme changer l'attribut du codec lors de la création du SourceBuffer ; et, si le navigateur sous-jacent prend en charge le décodage HEVC (probablement effectué par un décodeur matériel), vous pourrez alors regarder vos flux HEVC MPEG-DASH en HTML5 ! Nous avons testé avec succès des navigateurs, tels que Microsoft Edge, qui prend en charge HEVC. En outre, Google a récemment annoncé la prise en charge de son navigateur Chromium.

Néanmoins, HEVC n'est pas encore disponible pour la grande majorité des actifs vidéo Internet, et seuls quelques appareils sont capables de le décoder. Et, bien sûr, ce n'est pas le seul codec en ville. Le format d'encodage vidéo ouvert et libre de droits VP9 (le successeur de VP8) vise à avoir une efficacité d'encodage encore meilleure et est déjà pris en charge par les navigateurs populaires tels que Google Chrome et Microsoft Edge, et ce codec est également compatible avec MSE. Cependant, nous ne pouvons pas prévoir quels codecs se retrouveront dans notre routine de streaming quotidienne. Mais que ce soit VP8/9, AVC ou HEVC, les MSE et MPEG-DASH sont prêts !

Une tendance à venir est la vidéo à 360 degrés, qui est assez simple à utiliser en HTML5. Les développeurs pourraient utiliser la prise en charge du streaming adaptatif des MSE et ajouter simplement une couche de rendu JavaScript ou WebGL pour une expérience à 360 degrés. Récemment, j'ai donné une conférence sur ce sujet et sur la façon de créer un service de type Netflix pour la réalité virtuelle en utilisant HTML5, JavaScript, DASH et WebGL.

Conclusion

J'espère que cet article vous a donné un bon aperçu de l'état et de l'avenir de la vidéo sur le Web. Les MSE et les EME sont de grands pas vers un écosystème de normes ouvertes pour la vidéo sur le Web, remplaçant les plugins tels que Flash et Silverlight. De plus, HTML5 s'impose sur les plateformes de choix dans le monde multiplateforme d'aujourd'hui, y compris les environnements de bureau, mobiles et smart TV.

Outre les normes de streaming telles que MPEG-DASH, les fournisseurs de contenu peuvent disposer d'une solution vidéo unifiée sur l'ensemble des plates-formes et des appareils . Ils peuvent améliorer l'expérience utilisateur grâce à des formats de streaming adaptatifs, qui empêchent la mise en mémoire tampon, réduisent les temps de chargement et offrent la meilleure qualité possible pour la bande passante et la situation de l'appareil de chaque utilisateur.