Strange subtitles rendering

[stefanovualto]

Have you read the FAQ and checked for duplicate open issues?:
Yes
What version of Shaka Player are you using?:
2.4.4
Can you reproduce the issue with our latest release version?:
Yes
Can you reproduce the issue with the latest code from master?:
I didn't test it
Are you using the demo app or your own custom app?:
demo
If custom app, can you reproduce the issue using our demo app?:

What browser and OS are you using?:
MacOS High Sierra / Firefox 62.0
What are the manifest and license server URIs?:

• https://shaka-player-demo.appspot.com/demo/#asset=https://d1chyo78gdexn4.cloudfront.net/vualto-demo/sintel/sintel_nodrm.ism/manifest.mpd;lang=en-GB;build=compiled
• https://shaka-player-demo.appspot.com/demo/#asset=https://d1chyo78gdexn4.cloudfront.net/vualto-demo/elephants-dream/elephants-dream_nodrm.ism/manifest.mpd;lang=en-GB;build=compiled

What did you do?

• Load the stream
• Enable subtitles
• Pause at 6 sec for sintel or 15 sec. for Elephant dreams

What did you expect to happen?

• To see subtitles inside a small black box

What actually happened?

• I see a big black box behide the subtitles and in sometimes it is weirdly positioned (cf. elephant stream). (It works as expected in the 2.3.7 version)

[TheModMaker]

This is sort of expected. What is happening is we are using VTTRegion to set the portion of the window to draw the cue on. Then the browser is styling the VTTRegion with the default styles, which includes a background color of black. Normally, you should be able to add CSS to style them, like:

video::cue-region {
  background: transparent;
}

However, both Chrome (https://crbug.com/884232) and Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1491365) have bugs where you can't use CSS to fix this. Maybe we should just not use VTTRegion since it isn't even enabled in Chrome by default and Firefox has at least one bug with it.

Also note that your cues are supposed to have a transparent background, but we don't support many TTML styles, so we ignore it and just use the default black background.

I've filed #1585 to handle the odd positioning.

[stefanovualto]

Thanks for the tip, but will the changes between 2.3.7 and 2.4.4 around rendering be rolled back or fixed?

[TheModMaker]

I guess we can revert VTTRegion support until browsers fix their implementations. It is currently only doing something on Firefox anyway.

Also note that even though #1585 is fixed, it won't fix your content. You use a non-spec-compliant namespace URI in your TTML files; I suggest you talk to your encoder about using the correct namespace URIs. That file uses http://www.w3.org/2006/10/ttaf1, but the correct namespace URI is http://www.w3.org/ns/ttml. I can't find any spec (even old versions) that use that namespace URI.

See: https://www.w3.org/TR/ttml1/#vocabulary-namespaces

[joeyparrish]

The removal of VTTRegion support was cherry-picked to v2.4.5.