Diffuser des vidéos HLS de bonne qualité sur le Web et les appareils mobiles

Les éditeurs vidéo reconnaissent l'importance d'une stratégie universelle, même si aucun protocole n'était auparavant compatible avec les lecteurs Web et mobiles à la fois. Profitant de la compatibilité des lecteurs avec la diffusion segmentée, un format a pris une importance considérable dans la diffusion de vidéos sur les navigateurs Web et mobiles.

Appareils HLS

Le HTTP Live Streaming, raccourci en HLS, est un protocole de diffusion vidéo créé par Apple dans le cadre de son système d'exploitation iOS. La solution d'encodage vidéo à API de Brightcove Zencoder facilite la préparation du contenu pour HLS, mais il convient de savoir deux ou trois autres petites choses qui permettront aux éditeurs vidéo d'optimiser le contenu en fonction de leur situation. Ce guide aborde dans les grandes lignes les informations à connaître sur la lecture vidéo HLS dans les navigateurs et sur les appareils mobiles. Il vous donne également des conseils spécifiques sur l'encodage.

Le HLS, c'est quoi ?

Le HLS utilise un format vidéo H.264 MPEG-2 TS, ainsi que des fichiers de description M3U8 pour diffuser des contenus en direct et à la demande avec un débit adaptatif. Un fichier M3U8 est un index qui permet au client de savoir quels flux et quels segments sont disponibles à un moment donné. L'appareil choisit automatiquement le flux le plus approprié dans le fichier manifeste principal, en se basant sur les contraintes de la bande passante et du GPU. Il télécharge alors le segment et l'ajoute à la suite dans le tampon de lecture.

Comme son nom l'indique, le HLS transmet ses données via HTTP. Cela autorise de nombreuses améliorations par rapport aux protocoles de diffusion en continu habituels comme le RTP ou le RTMP, notamment :

  • Des coûts d'infrastructure réduits
  • Possibilité de mise en cache sur les CDN et sur d'autres infrastructures de cache HTTP
  • Moins de risques de restrictions par proxy ou pare-feu
  • Optimisation en temps réel via l'heuristique client (débit adaptatif)
  • Redondance intégrée
  • Implémentation simplifiée des lecteurs HTML5
Apple Store

L'Apple App Store a des exigences strictes quant aux vidéos diffusées par le biais des applications iOS. La diffusion en continu (streaming) est obligatoire pour tout le contenu vidéo qui dépasse 10 minutes ou 5 Mo de transfert de données en 5 minutes (133 kbits/s). Apple exige également que les développeurs fournissent un flux audio de 64 kbits/s (ou inférieur) en guise de solution de rechange pour les réseaux cellulaires. Les applications qui ne remplissent pas ces critères sont refusées dans l'App Store. Pour en savoir plus sur le déploiement de vidéos dans l'App Store, consultez la documentation de présentation du HTTP Live Streaming dans la bibliothèque des développeurs iOS : http://bit.ly/zgHSJX

Appareils mobiles

En règle générale, les appareils les plus récents sont très puissants et capables de gérer des profils plus avancés du H.264. Avec l'arrivée de l'iPhone 4S (et versions ultérieures), les appareils iOS deviennent compatibles avec 3 profils différents de H.264 : Baseline, Main et High. Il est plus difficile de généraliser sur les appareils Android à cause de leur nombre incroyablement élevé. Cependant, les derniers appareils Android haut de gamme prennent en charge au moins autant de choses que l'iPhone 4. Ces profils, ainsi que les niveaux H.264 qui les accompagnent, permettent de catégoriser les capacités de lecture de chaque appareil client. Bien que ces appareils n'aient pas un écran taillé pour la haute définition, certains d'entre eux peuvent afficher des résolutions HD et SD sur une télévision via l'Apple Digital AV Adapter ou l'Apple VGA Adapter.

IPHONE 1 À 3GS, IPOD TOUCH 1-3 IPHONE 4, IPAD 1, APPLE TV 1&2, IPOD TOUCH 4&5 ET DERNIERS APPAREILS ANDROID* IPHONE 4S+, IPAD 2-4, APPLE TV 3 ET DERNIERS APPAREILS ANDROID*
Informations sur le profil Profil Baseline Profil Main Profil High
Niveau Niveau 3.0 Niveau 3.1** Niveau 4.1***
Son Audio AAC, 1-2 canaux Audio AAC, 1-2 canaux Audio AAC-LC, 1-2 canaux
Nombre d'images par seconde 30 ips 30 ips 30 ips*
Débit vidéo Jusqu'à 1,5 Mbits/s Jusqu'à 5 Mbits/s Jusqu'à 5 Mbits/s
Débit audio Jusqu'à 160 kbits/s Jusqu'à 160 kbits/s Jusqu'à 160 kbits/s
Taux d'échantillonnage audio 48 000 ou moins 48 000 ou moins 48 000 ou moins
Résolution d'affichage 480 x 320 iPhone 4/4s : 960 x 640
iPad 1 : 1 024 x 768
iTouch : 1 136 x 640
iPhone 5+ : 1 136 x 640
iPad 2 : 1 024 x 768
iPad 3/4 : 2 048 x 1 536

* L'iPhone 5S et la plupart des Android dernier cri sont désormais compatibles avec le profil High niveau 4.2 à 60 ips
** L'iPod touch 5 est compatible avec le niveau 4.1 et inférieurs
*** Apple TV 3 est compatible avec le niveau 4.0 et inférieurs

Ordinateurs de bureau et dispositifs over-the-top (OTT)

À l'heure actuelle, le seul navigateur compatible en natif avec HLS est Safari (versions 4.0 et ultérieures), mais une alternative Flash peut être utilisée sur d'autres appareils. Video.js offre une compatibilité HLS par le biais de son composant Flash, ce qui permet de le faire prendre en charge par presque tous les navigateurs. Plusieurs applications et dispositifs over-the-top comme Quicktime, VLC, Apple TV, Roku, Google TV et XBMC sont également compatibles HLS. Si la connexion le permet, ils peuvent prendre en charge un profil High.

Fonctionnalités avancées

La vidéo HLS est en constante évolution et de nouvelles fonctionnalités sont régulièrement ajoutées. Aujourd'hui, le HLS prend en charge une large gamme de fonctionnalités avancées, dont :

  • Un chiffrement AES-128 pour sécuriser les contenus
  • Un sous-titrage CEA-608 dans le flux de transfert
  • Une diffusion en direct ou à la demande
  • Les pistes audio peuvent contenir une image (jaquette, capture d'écran, etc.)
  • Une diffusion des métadonnées via le format ID3, y compris les métadonnées temporelles

Six conseils pour l'encodage HLS

Voici six conseils pour réaliser un encodage HLS optimal. Ces recommandations fonctionnent pour la conversion de vidéos en direct comme pour les vidéos à la demande.

  1. Utilisez le format audio HE-AAC. L'AAC standard (souvent appelé AAC-LC) donne un bon son dans les débits à 96 kbits/s et plus, mais la compression est flagrante dans les débits inférieurs. Ce problème est important dans le cas du HTTP Live Streaming, car l'App Store exige un flux de 64 kbits/s pour la plupart des applications. Le HE-AAC (« High Efficiency AAC » ou AAC à haute efficacité) est optimisé pour les faibles débits et sonne bien mieux que le AAC-LC dans la gamme du 64 kbits/s si chère au HLS.
  2. Apple conseille de conserver les mêmes paramètres audio pour empêcher la création d'artefacts. Si l'audio change d'un flux à l'autre, le son peut « sauter » lors du changement de débit. Si une modification des paramètres s'avère nécessaire pour améliorer la qualité de certains de vos flux, essayez au moins de conserver un taux d'échantillonnage standard.
  3. Le taux d'images clés doit être un intervalle régulier de la taille du segment. Par exemple, si le segment fait 10 secondes, le taux d'images clés peut être de 2 secondes, 2,5 secondes, 3,33 secondes, 5 secondes ou 10 secondes. Certains encodeurs, Zencoder compris, créent automatiquement des images clés aux intervalles appropriés. Utilisez le paramètre force_keyframe_rate avec Zencoder pour assurer un alignement correct des images clés entre les flux.
  1. Faites attention aux surcharges (« overhead ») liées aux formats. Le MPEG-TS utilise beaucoup de padding superflu et, avec un multiplexeur TS non optimisé, le HLS peut prendre beaucoup plus de place que ses équivalents MP4 (jusqu'à 20 % de plus). Zencoder et Apple se servent de multiplexeurs TS très optimisés qui permettent de réduire les surcharges.
    Débit demandé Surcharge
    HLS optimisé par Zencoder 364 kbits/s 4,83 %
    HLS non optimisé 364 kbits/s 16,34 %
  2. Pensez à limiter les pics de débits pour garantir de bonnes performances lors des diffusions en continu. Nous vous recommandons de définir un débit maximum (bitrate_cap) à 150 % du débit moyen, avec un tampon de 3 à 5 secondes.
  3. La valeur streams doit contenir toutes les informations pertinentes. C'est particulièrement important lorsque vous proposez plusieurs profils H.264 de façon à inclure toutes les valeurs de codec appropriées. Ces paramètres empêchent les appareils hérités de télécharger des segments indécodables par erreur. Servez-vous par exemple des valeurs « avc1.42E01F, mp4a.40.2 » pour le profil Baseline 3.0 et « avc1.42E01F, mp4a.40.2 » pour le Main 3.1.

Fichiers en sortie et lecture

La vidéo HLS se compose de fichiers d'index (des manifestes XML *.M3U8) qui font référence soit à d'autres fichiers M3U8, soit à des segments vidéo individuels (des segments *.ts, généralement longs de deux à dix secondes). Avec Zencoder, l'emplacement base_url spécifié contiendra un manifeste *.M3U8 une fois la tâche d'encodage terminée.

Lecture des fichiers créés par Zencoder

Représentation de la structure d'un fichier HLS par Apple

Vous pouvez organiser chaque ensemble de segments en dossiers en vous servant d'un base_url propre. Vérifiez simplement que la valeur path de la portion playlist de la requête API mentionne l'emplacement de stockage de chaque flux, sans quoi votre fichier de manifeste renverra vers un emplacement vide. Lorsque le client récupère le fichier playlist.m3u8 (le fichier d'index principal), il décide du flux à lire selon les limitations de la plate-forme et du réseau.

EXEMPLE : LECTEUR HTML5 BASIQUE DE TEST AVEC VIDEO.JS

      
	<!DOCTYPE html>
	<html>
	<head>
		<title>Lecteur test de diffusion en continu HTTP</title>
		<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet" type="test/css">
		<script src="http://vjs.zencdn.net/c/video.js"></script>
        </head>
	<body>
		<video id="example_video_1" class="video-js vjs-default-skin" controls autoplay
		width="640" height="360" data-setup="{}">
			<source src="http://YourServerHere/playlist.m3u8" type="application/x-mpegURL" />
		</video>
	</body>
	</html>
			

Conseils relatifs à l'encodage

Nous voulons que vos vidéos soient aussi belles que possible, mais étant donné que la compression vidéo est un art subjectif, nous ne pouvons vous offrir que des conseils pour commencer. Votre application peut être pensée pour les smartphones ou les appareils mobiles. Dans ce cas, il serait préférable d'ajouter des flux supplémentaires dans les débits inférieurs. À l'inverse, votre application peut cibler les appareils connectés à un bon réseau, ce qui peut alors limiter le nombre de flux nécessaires. Si votre source contient beaucoup d'angles de caméra, de mouvements ou de coupures, une augmentation du paramètre video_bitrate peut être préférable pour atteindre les résultats visés.

Comme toujours avec la vidéo, vos yeux doivent être seuls juges de la qualité finale. Utilisez un lecteur de test avec le paramètre clip_length pour afficher des petits flux de test et modifier les paramètres comme bon vous semble. N'oubliez pas les 6 astuces ci-dessus. Grâce à elles, vos vidéos auront une qualité formidable, quel que soit l'appareil iOS utilisé pour le visionnage.

Résolution Informations sur le profil Débit En 16:9 En 4:3 Son Remarques
1 280 x 960 High@4.0 4 Mbits/s 1 280 x 720 1 280 x 960 HE-AAC 64 kbits/s
1 024 x 768 Main@3.1 2 Mbits/s 1024 x 576 1 024 x 768 HE-AAC 56 kbits/s
960 x 640 Main@3.1 1,5 Mbits/s 960 x 540 854 x 640 HE-AAC 56 kbits/s
640 x 432 Main@3.1 1 Mbit/s 640 x 360 576 x 432 HE-AAC 56 kbits/s
480 x 320 Baseline@3.0 600 kbits/s 480 x 272 426 x 320 HE-AAC 56 kbits/s
400 x 288 Baseline@3.0 400 kbits/s 400 x 224 384 x 288 HE-AAC 56 kbits/s
400 x 288 Baseline@3.0 200 kbits/s 400 x 224 384 x 288 HE-AAC 56 kbits/s Dégrade le nombre d'images par seconde
(audio uniquement) (audio uniquement) (audio uniquement) (audio uniquement) (audio uniquement) HE-AAC 56 kbits/s Comprend une image

Remarques

  1. Il ne s'agit que de recommandations. D'autres résolutions et débits sont tout à fait valables et peuvent même être préférables dans certaines situations. Par exemple, un contenu complexe nécessitera des débits plus élevés, alors qu'un contenu simple se satisfera de débits moindres.
  2. Ces 6 débits et résolutions couvrent assez pertinemment les variations de bande passante. Vous pouvez bien entendu en ajouter d'autres (Apple conseille d'en utiliser 8). Ajoutez ou enlevez donc des profils au besoin.
  3. La première colonne est celle de la résolution générale. Selon le format de la vidéo (4:3 ou 16:9), le résultat final affichera une résolution différente, qui est indiquée dans les colonnes 4 et 5.
  4. Préférez un nombre d'images par seconde limité à 30. Ne forcez jamais un changement du nombre d'images par secondes. Pour assurer une lecture fluide, supprimez les nombres d'images par seconde trop élevés. Dans les flux les plus bas, supprimez les nombres d'images par seconde inférieurs à 15.
  1. Pour assurer la compatibilité avec les iPhone 1, forcez l'utilisation d'une seule image de référence H.264 pour les flux Baseline.
  2. Utilisez un intervalle d'images clés de cinq ou dix avec un alignement d'image forcé.
  3. Limitez les taux d'échantillonnage audio à 44 100 ou moins pour garantir une compatibilité optimale.
  4. Pensez à limiter les pics de débit pour assurer une lecture fluide. Pour un bon compromis entre fluidité et qualité, fixez le plafond à 150 % du débit moyen avec un tampon de trois à cinq secondes.