Converting Cues to (X)HTML

Hello list,

I have a need for WebVTT support with audios, something browser native 
players simply do not support. They do however support the JS API.

So I created my own html5 audio interface that lets me display the captions.

What I do is take the cues from the TextTrack API and convert them to 
valid XHTML and use jQuery append() to add them to a div where they are 
then displayed. It works quite well, but -

A) I convert <c.whatever>some string</c> to <span class="whatever">some 
string</span>

B) I convert <v The Amazing Spiderman>some string</v< to <span 
data-voice="The Amazing Spiderman">some string</span>

I want to make sure there's not a better approach I'm not aware of.

It does break and CSS emnedded in the WebVTT file however I suspect that 
would be broken anyway since I use Content Security Policy which forbids 
CSS that isn't in the head node. So I probably have to have the CSS 
external anyway so it can be in the head node, and I can adjust it 
accordingly.

It also breaks the pseudo-selectors.

Anyway, is the approach of putting the cues into cues that are then 
placed into a div the right approach, or is there a better way?

Every custom media player tutorial I looked at on the web had video in 
mind, but also did a similar thing - only they didn't take into account 
what to do with c or v tags at all.

Thank you for your time.

Received on Tuesday, 7 November 2017 00:20:13 UTC