How to use subtitles with the DefaultMediaReceiver app

Subtitles

The Default Media Receiver supports the usage of subtitles. This article explains how you can activate them in your application and how you are able to style them.

Prerequisites

Both your subtitle and video track MUST be hosted on a server supporting CORS. A basic express server exposing the current directory with CORS would look like this :

app.use(function(req, res, next) {
  if(req.headers.origin) {
    res.headers['Access-Control-Allow-Origin'] = req.headers.origin;
  }
  next();
});

app.use(express.static(__dirname));

Enabling Subtitles

To enable subtitles you have todo two things: First, attach an array of subtitle tracks to your media object. Second, define which track(s) should be active on playback. For example, you could define the subtitle tracks "english", "german" and "french" and then activate "french" by default. The user would then have the opportunity to switch to the "german" or "english" subtitle while playback.

var media = {
  contentId: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/ED_1280.mp4',
  contentType: 'video/mp4',
  streamType: 'BUFFERED',
  tracks: [{
    trackId: 1, // This is an unique ID, used to reference the track
    type: 'TEXT', // Default Media Receiver currently only supports TEXT
    trackContentId: 'http://vtt.dev.sope.io/', // the URL of the VTT (enabled CORS and the correct ContentType are required)
    trackContentType: 'text/vtt', // Currently only VTT is supported
    name: 'English', // a Name for humans
    language: 'en-US', // the language
    subtype: 'SUBTITLES' // should be SUBTITLES
  }]
};

// You have to tell the Chromecast which trackIds to play with activetrackIds.
player.load(media, { autoplay: true, activeTrackIds: [1] }, function(err, status) {
  // ... do something duringplayback ...
});

Toggling between subtitles during playback

Say you want to switch to an other subtitle track during playback. You can do that by sending an command of the type EDIT_TRACKS_INFO to your chromecast device.

player.media.sessionRequest({
  type: 'EDIT_TRACKS_INFO',
  activeTrackIds: [2] // switch to subtitle with trackId 2
});

Turning off subtitles during playback

You can turn off subtitles during playback by sending an empty activeTracksId array like this:

player.media.sessionRequest({
  type: 'EDIT_TRACKS_INFO',
  activeTrackIds: [] // turn off subtitles.
});

Subtitle styling

You don't like the subtitle styles? No problem, you can change the styling like this:

var media = {
  contentId: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/ED_1280.mp4',
  contentType: 'video/mp4',
  streamType: 'BUFFERED',
  textTrackStyle: {
    backgroundColor: '#FFFFFFFF', // see http://dev.w3.org/csswg/css-color/#hex-notation
    foregroundColor: '#0000FFFF', // see http://dev.w3.org/csswg/css-color/#hex-notation
    edgeType: 'DROP_SHADOW', // can be: "NONE", "OUTLINE", "DROP_SHADOW", "RAISED", "DEPRESSED"
    edgeColor: '#AA00FFFF', // see http://dev.w3.org/csswg/css-color/#hex-notation
    fontScale: 2, // transforms into "font-size: " + (fontScale*100) +"%"
    fontStyle: 'BOLD_ITALIC', // can be: "NORMAL", "BOLD", "BOLD_ITALIC", "ITALIC",
    fontFamily: 'Droid Sans', // specific font family
    fontGenericFamily: 'CURSIVE', // can be: "SANS_SERIF", "MONOSPACED_SANS_SERIF", "SERIF", "MONOSPACED_SERIF", "CASUAL", "CURSIVE", "SMALL_CAPITALS",
    windowColor: '#AA00FFFF', // see http://dev.w3.org/csswg/css-color/#hex-notation
    windowRoundedCornerRadius: 10, // radius in px
    windowType: 'ROUNDED_CORNERS' // can be: "NONE", "NORMAL", "ROUNDED_CORNERS"
  },
  tracks: [{
    trackId: 1, // This is an unique ID, used to reference the track
    type: 'TEXT', // Default Media Receiver currently only supports TEXT
    trackContentId: 'http://vtt.dev.sope.io/', // the URL of the VTT
    trackContentType: 'text/vtt', // Currently only VTT is supported
    name: 'English', // a Name for humans
    language: 'en-US', // the language
    subtype: 'SUBTITLES' // should be SUBTITLES
  }]
};

player.load(media, { autoplay: true, activeTrackIds: [1] }, function(err, status) {
  // ... do something during playback ...
});

Updating subtitle styles during playback

You can also update the subtile styles during playback:

player.media.sessionRequest({
  type: 'EDIT_TRACKS_INFO',
  // apply some new styles:
  textTrackStyle: {
    fontScale: 1
  }
});