In a previous article, I have described a solution to self-host
videos while offering a delivery adapted to each user’s bandwith,
thanks to HLS and hls.js. Subtitles1 were not part of
the game. While they can be declared inside the HLS manifest or
embedded into the video, it is easier to include them directly in the
<video> element, using the WebVTT format:
<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>
Watch the following demonstration, featuring Agent 327: Operation Barbershop, a video created by Blender Animation Studio and currently released under the Creative Commons Attribution No Derivatives 2.0 license:
This does not seem to work with Firefox 68 on Android. The browser makes no attempt to download the selected subtitle. Firefox Preview does not have the problem.
If subtitles are served from another domain,
crossorigin="anonymous" attribute needs to be added to the
tag and subtitles need to handle CORS headers. On some browsers, this
also enables CORS for the video and the poster.
The issue with Firefox and the subtitle menu will be fixed in Firefox 76, which will be released in May.