Earlier this year we announced support for subtitles and captions and described some of the magic flags for controlling their behavior. If you saw that “we’ll be giving you more control over the DEFAULT flag later this year” and have been holding your breath for the follow-up, you can finally breathe again!
A quick recap of the DEFAULT flag from those previous blogs: it “indicates that this track must be played by default, unless the user overrides this.” So it’s especially useful to enable captions on autoplaying video that is muted.
Mux now supports setting the DEFAULT flag to “YES” on a caption or subtitle track through playback modifiers that can be added to the manifest URL:
https://stream.mux.com/{PLAYBACK_ID}.m3u8?default_subtitles_lang=en-AUBecause this feature only affects manifests, it already works with all existing assets! Like other playback modifiers, it can be included as a claim inside the JWT body for signed URLs too:
{
"exp": 1599583520,
"aud": "v",
"sub": "{PLAYBACK_ID}",
"default_subtitles_lang": "en-AU"
}Most players handle this automatically so long as autoplay is enabled and the track has DEFAULT set to “YES”. Here’s a simple Video.js example:
<html>
<head>
<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
</head>
<body>
<video-js
id="muted-autoplay" width=640 height=360 class="vjs-default-skin"
controls muted autoplay playsInline
poster="https://image.mux.com/{PLAYBACK_ID}/thumbnail.jpg">
<source
src="https://stream.mux.com/{PLAYBACK_ID}.m3u8?default_subtitles_lang=en"
type="application/x-mpegURL">
</video-js>
<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
<script>
var player = videojs('muted-autoplay');
</script>
</body>
</html>Language Selection
Just like when creating a subtitle track, Mux accepts BCP-47 language codes for selecting a default subtitle language. Most often you would simply match the language your page or UI is presenting.
If there’s no exact match on the asset, we’ll try to find the closest match of the same language. This helps with regional variations as well as being a bit more flexible.
With a video that has US and UK subtitles…
#EXT-X-MEDIA:TYPE=SUBTITLES, … ,NAME="English (US)",DEFAULT=NO,LANGUAGE="en-US"
#EXT-X-MEDIA:TYPE=SUBTITLES, … ,NAME="English (UK)",DEFAULT=NO,LANGUAGE="en-GB"then ?default_subtitles_lang=en will return the US version:
00:45.200 --> 00:49.670
I organized my neighbors for a viewing at the theater.and ?default_subtitles_lang=en-AU will match to the UK version:
00:45.200 --> 00:49.670
I organised my neighbours for a viewing at the theatre.Try it Out
The Video.js example above is copied into this Code Sandbox, updated with your favorite test video. Give it a try, and as always, let us know if you have any questions or feedback.
