VTT subtitle rendering HTML tags

[bmaniar]

Have you read the Tutorials? Yes

Have you read the FAQ and checked for duplicate open issues? Yes

What version of Shaka Player are you using? 3.1.0

Please ask your question My question is about the VTT subtitle. I am using the default VTT parser and my VTT file looks like below

WEBVTT

1 00:00:01.750 --> 00:02:12.000 <font color = #FFFFFF><i>This..</i></font>

2 00:02:12.792 --> 00:02:14.083 <font color = #FFFFFF><i>is not my life.</i></font>

3 00:02:16.542 --> 00:02:17.917 <font color = #FFFFFF><i>But this is.</i></font>

Using this subtitle player is rending its HTML tags as shown below

Do we need to write a custom parser for it? Can you guide me on how I can fix this issue?

[ismena]

@TheModMaker @michellezhuogg Can you check me on this? Also, how much styling do we support on vtt with the custom displayer?

I don't think this is the right way to specify css on vtt. Id I'm correct in my reading of the spec, it should look something like this:

WEBVTT

STYLE
::cue { color:#FFFFFF }

00:00:01.750 --> 00:02:12.000
This...

[joeyparrish]

Are you using the Shaka Player UI? The UI-based (DOM-based) text renderer has some styling support. The browser's native text display does not.

[bmaniar]

Yes, @joeyparrish I am using shaka player UI with default parser.

[TheModMaker]

That content isn't spec compliant, you can't have <font> elements in the text. You would need to use classes (which we have limited support for) to do this. Something like this:

WEBVTT

STYLE
::cue(c.white) { color:#FFFFFF }

00:00:01.750 --> 00:02:12.000
<c.white><i>This..</i></c>

I'm fairly sure we support the <i> element, but we may not support classes.

[bmaniar]

Currently, I don't have control over VTT files or their creation. so I have implemented a workaround for now as below where we register custom VTT parser and filter out the font tag and give back the controls to the default one.

const CustomVttTextParser = class extends text.VttTextParser {
    parseMedia(data, time) {
        const vttTextParser = new text.VttTextParser()
        let str = util.StringUtils.fromUTF8(data)
        str = str.replace(/\0/g, '')
        str = str.replace(/\r\n|\r(?=[^\n]|$)/gm, '\n')
        str = str.replace(/<\/?font\b[^<>]*>/g, '')
        const utf8Encoder = new TextEncoder()
        const uni8Data = utf8Encoder.encode(str)
        const result = vttTextParser.parseMedia(uni8Data, time)

        return result
    }
}