How can be added multiple subtitles using dash shaka-player from a .mpd file?

[Genar Codina]

Summary: I do not know how to add (and/or to show) multiple subtitles which are configured in the .mpd file.

I have set a web site to provide videos through internet, using shaka-player library, so that Google Chrome users can watch them. So, using the following tutorial I could manage to deploy a simple demo video:

https://shaka-player-demo.appspot.com/docs/tutorial-player.html

In my case all the .mp4 audio and video files, and also the .vtt files for the subtitles for Greek and also English are in the same folder (web folder); in that folder there is also the .mpd file which is used in order to load the video, according to the tutorial mentioned above.

// Construct a DashVideoSource to represent the DASH manifest.
var mpdUrl = 'https://turtle-tube.appspot.com/t/t2/dash.mpd';
var estimator = new shaka.util.EWMABandwidthEstimator();
var source = new shaka.player.DashVideoSource(mpdUrl, null, estimator);
// Load the source into the Player.
player.load(source);

I have also added subtitles support using the attached .mdp file (output.mpd).

In a Google Chrome web browser I can play the film and I can see several controls like volume and also "CC", which means subtitles; consequently, when I press over "CC" then I can activate subtitles; however, I have configured two subtitles languages in the .mpd file (Greek and English) but pressing on the "CC" control it can only activate or deactivate the subtitles in Greek (the first .vtt subtitles file set in the .mpd file attached to this post), but I do not know how to activate or to show a menu to select the subtitles in the different available languages set in the output.mpd file.

[Genar Codina]

The aforementioned .mpd file contains two entries for two different subtitles languages and it is correct. The way to select one subtitle or the other is using the methods:

getTextTracks()
selectTextTrack(id)

That is:

// Load the source into the Player.

player.load(source).then(function() {
var textTracks = player.getTextTracks();
console.log("TextTrack Len: " + textTracks.length);
// Selecting the second text track got from
// getTextTracks()
player.selectTextTrack(textTracks[1].id);
video.play();
});

Of course, it will be necessary to add this logic to a user interface control (HTML5) so that the user can select the suitable subtitle.

It could be nice to add a new control in the tool bar of the player (where there are the controls of volume, enlarge, etc.), which performs this functionality, but I do not know how to add it.

[Joey Parrish]

Hi Genar,

Thanks for writing.  You are correct, those are the APIs you would use to select a specific subtitle track.

It sounds like what you're seeing are the browser's built-in video controls.  The built-in video controls seem to only offer a "CC" toggle, but no way to select between tracks.  Shaka Player, as a library, does not offer any UI of its own.  So there is no tool bar in Shaka Player in which to add this feature.

We offer full-featured APIs so that an application developer can offer a full-featured UI, including the ability to select tracks.  But UI design is not within the scope of this project.

Our demo app (index.html in the source) has very simple controls on the page which allow control over track selection (including text tracks) and demonstrate how the APIs work.  But that's the only UI in the project, and it's separate from the library itself.

Thanks,

Joey

--
You received this message because you are subscribed to the Google Groups "Shaka Player Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shaka-player-us...@googlegroups.com.
To post to this group, send email to shaka-pla...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/shaka-player-users/57e3ba91-7b23-4def-8441-1205702cd795%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.