WebVTT vertical positioning

[kvolkers]

[REQUIRED] Issue description

Given the following WebVTT: webvtt.txt (extension renamed to be uploadable)

The subtitles contain position information. ExoPlayer does seem to take this information as the subtitles are displayed at different heights. But, overall, they seem to be lower than expected. Reproduced it in both my own app and the ExoPlayer demo app.

When looking at other instances parsing the same subtitles they are shown at the expected height (WebVTT renderer on the web, Chromecast).

Screenshots are taken with the following subtitle entry.

3
00:00:06.080 --> 00:00:09.560 line:90% position:50% align:middle
<c.white>Eigenlijk omdat ik twee jaar</c>
<c.white>thuis zat. Door mijn thuissituatie.</c>

My app (using ExoPlayer 2.10.8 icw SubtitleView), subs at the bottom:

ExoPlayer 2.10.8 demo app, subs at the bottom:

Online WebVTT renderer (https://zcorpan.github.io/live-webvtt-viewer/), subs at 90%:

Chromecast, subs at 90%:

[REQUIRED] Reproduction steps

1. Modify ExoPlayer demo app PlayerActivity#initializePlayer to

        String subtitlesUrl = "...";
        Format subtitlesFormat = Format.createTextSampleFormat(null, MimeTypes.TEXT_VTT, C.SELECTION_FLAG_FORCED, "nl");
        SingleSampleMediaSource subtitlesMediaSource = new SingleSampleMediaSource.Factory(dataSourceFactory)
                .createMediaSource(Uri.parse(subtitlesUrl), subtitlesFormat, C.TIME_UNSET);
        MergingMediaSource mergingMediaSource = new MergingMediaSource(mediaSource, subtitlesMediaSource);
        player.prepare(mergingMediaSource, !haveStartPosition, false);

2. Start ExoPlayer demo app
3. SELECT TRACKS, TEXT, Dutch
4. Observe vertical subtitle position

[REQUIRED] Link to test content

See attached WebVTT file.

[REQUIRED] A full bug report captured from the device

If this is necessary let me know.

[REQUIRED] Version of ExoPlayer being used

2.10.8

[REQUIRED] Device(s) and version(s) of Android being used

Tested and reproduced on:

• Samsung S10, Android 9
• Xiaomi Mi9, Android 9

[AquilesCanta]

@icbaker, mind taking a look?

[icbaker]

Thanks for the report and clear reproduction steps - I see the same behaviour.

I believe ExoPlayer is actually following the WebVTT spec here. Specifically we assume that if the 'line alignment' isn't set then it defaults to 'start' (i.e. top for horizontal text):

A WebVTT line cue setting configures the offset of the cue box from the video viewport’s edge in the direction orthogonal to the writing direction. For horizontal cues, this is the vertical offset from the top of the video viewport, for vertical cues, it’s the horizontal offset. The offset is for the start, center, or end of the cue box, depending on the WebVTT cue line alignment value - start by default.

https://www.w3.org/TR/webvtt1/#webvtt-line-cue-setting

So in your screenshot of the demo app, we're trying to put the top of the cue box 90% down the screen. In fact, if you measure the pixels in your image, you'll see that the video height is ~911px and the distance to the top of the cue box is ~788px, which is a position of 788/911 = 86% - I think this is actually higher than you 'asked for' because we move it up to avoid the bottom of the cue box dropping off the screen.

If you explicitly set the 'line alignment' to 'end' (bottom) by changing line:90% to line:90%,end then it behaves more like your other examples.

I measured the Online WebVTT renderer screenshot - it seems they're putting the bottom of the cue text (not box) at 90% (height=1080, distance-to-bottom-of-text=972 -> 972/1080=90%). This might be a coincidence, they might have some 'virtual' margin to avoid cues being hard up against the bottom of the screen (but afaict that's not mentioned in the spec). I don't know exactly how they concluded that's the right place to position the cue box.

This is 90% of the height:

It's not really possible to measure the photograph of the chromecast, so I'm not sure what that's doing.

I'm going to close this as WAI - but please reply if you think I've misunderstood or missed the point and I'll be happy to take another look.