Auto-hébergement de vidéos avec HLS : sous-titres

Vincent Bernat

Dans un ar­ticle pré­cé­dent, j’ai dé­crit une so­lu­tion pour hé­ber­ger soi-même des vi­déos tout en adap­tant la bande pas­sante de chaque uti­li­sa­teur à l’aide de HLS et hls.js. Le ré­sul­tat fai­sait l’im­passe sur les sous-titres. Bien que ceux-ci puissent être dé­cla­rés dans le ma­ni­feste HLS ou in­té­grés di­rec­te­ment dans la vi­déo, il est plus simple de les in­clure dans l’élé­ment <video> en uti­li­sant le for­mat WebVTT:

<video poster="poster.jpg"
       controls preload="none">
  <source src="index.m3u8"
          type="application/vnd.apple.mpegurl">
  <source src="progressive.mp4"
          type='video/mp4; codecs="avc1.4d401f, mp4a.40.2"'>
  <track src="de.vtt"
         kind="subtitles" srclang="de" label="Deutsch">
  <track src="en.vtt"
         kind="subtitles" srclang="en" label="English">
</video>

Voici un exemple pré­sen­tant Agent 327: Ope­ra­tion Bar­ber­shop, une vi­déo créée par Blen­der Ani­ma­tion Stu­dio et ac­tuel­le­ment pu­bliée sous la li­cence Crea­tive Com­mons At­tri­bu­tion No De­ri­va­tives 2.0 :

Le pre­mier sous-titre se trouve à 0:12. La plu­part des na­vi­ga­teurs pro­posent un menu pour choi­sir les sous-titres. Cela fonc­tionne avec Chro­mium mais Fi­re­fox n’af­fiche pas ce menu avant de jouer la vi­déo, à moins d’au­to­ri­ser le pré­char­ge­ment. Autre in­con­vé­nient, il n’y a pas de moyen simple de spé­ci­fier une marge de sé­cu­rité et les sous-titres res­tent coin­cés contre le bas de la vi­déo. Ces deux pro­blèmes res­tent suf­fi­sam­ment mi­neurs pour ne pas jus­ti­fier le té­lé­char­ge­ment de plu­sieurs cen­taines de ki­bi­oc­tets de JavaScript pour un lec­teur tiers.

Mise à jour (12.2019)

Si les sous-titres sont ser­vis de­puis un autre do­maine, la ba­lise <video> doit conte­nir l’at­tri­but crossorigin="anonymous" et les sous-titres doivent gé­rer les en­têtes CORS. Sur cer­tains na­vi­ga­teurs, cela né­ces­site éga­le­ment d’ac­ti­ver CORS pour la vi­déo et le poster.

Mise à jour (09.2020)

Le pro­blème avec Fi­re­fox concer­nant le menu pour les sous-titres est cor­rigé dans Fi­re­fox 76. Sous An­droid, les sous-titres fonc­tionnent à par­tir de Fi­refox 80.