December 18, 2020 (about 3 years ago)

Subtitles by DEFAULT

Justin Greer
By Justin Greer2 min readProduct

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-AU

Because 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
<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>

LinkLanguage 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.

LinkTry 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.

Written By

Justin Greer

Justin Greer – Staff Software Engineer

Specializes in generalizing in video encoding, which he previously did at Zencoder and Brightcove. Enjoys woodworking because boards never complain about missing semicolons.

Leave your wallet where it is

No credit card required to get started.