Re: Converting Cues to (X)HTML

STYLE is in-line CSS so there's no security issue.
And ::cue based styling is also already in the parent document, so
only loading the WebVTT file cross-server would be an issue.

If you create your own CSS box in a html page into which you're
rendering the WebVTT, you can just use the CSS on that HTML file for
styling.

HTH,
Silvia.

On Tue, Nov 7, 2017 at 11:58 AM, Alice Wonder <alice@domblogger.net> wrote:
> "breaks" was the wrong word.
>
> What I mean is I do not attempt to retrieve anything from the STYLE element
> to apply it to the captions, nor did I see a API that would let me do so.
>
> I do recall CSP being very strict about CSS/JS that isn't in the head node,
> which is actually something I like because it is harder for XSS to inject
> CSS/JS into the head node, so I'm not sure how browsers could implement
> STYLE if CSP is in effect unless they reduce the safety measures of CSP.
>
> On 11/06/2017 04:49 PM, Silvia Pfeiffer wrote:
>>
>> Hi Alice,
>>
>> if you put your audio file in a video element, you can use the
>> browsers and WebVTT to render captions.
>>
>> What you are doing seems like it should work. When you say "it
>> breaks", what breaks?
>> CSS should remain on the Web page for now, until the browsers have
>> implemented the STYLE section.
>>
>> HtH,
>> Silvia.
>>
>>
>> On Tue, Nov 7, 2017 at 11:19 AM, Alice Wonder <alice@domblogger.net>
>> wrote:
>>>
>>> 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 01:11:37 UTC