Add <track> to <video> if there's a .vtt file

[jonatron]

We now have .vtt files, from SReview and Whisper, so we can now add captions.

[jonatron]

I have to guess because I don't have the pretalx db, only the sample. It'd be something like this: https://github.com/jonatron/website/compare/master...jonatron:website:video_track_captions?expand=1

[johanvdw]

Thanks for your contribution!

I'll do a check with the actual data from pretalx.

[jonatron]

Just checked adding a track in devtools, I get:
Security Error: Content at https://fosdem.org/2025/schedule/event/fosdem-2025-5370-using-dpop-to-use-access-tokens-securely-in-your-single-page-applications/ may not load data from https://video.fosdem.org/2025/aw1120/fosdem-2025-4526-discovering-indoor-environments-and-positioning-systems.vtt .
So it needs a CORS or CSP header change too.

[johanvdw]

You should probably only add vtt if it exists.

[jonatron]

I updated the above branch to only add a track if a vtt exists. I also added crossorigin="anonymous", but it'll need Access-Control-Allow-Origin: https://fosdem.org added to video.fosdem.org .vtt file response headers, hopefully someone can sort that out?

[jonatron]

@gerryd do you know if it's possible to add that CORS header?

[johanvdw]

Can you make a PR? I was looking for this for a while but didn't find it because it was an issue and not a PR.
We can add the header to video.fosdem.org

[johanvdw]

I actually started doubting my own statement: because we use mirrors, we may not control the cors stuff. But anyway, we can try.

[jonatron]

It might be OK, it looks like currently video files send a location header to a mirror, but the vtt file is served direct.

[johanvdw]

#279 (comment) for a larger export file if you want to test on a larger scale.

[jonatron]

Seems to work with that export, thanks.

[jonatron]

It looks like crossorigin="anonymous" made the CORS header required on the video file. I thought it'd only affect the track. Assuming you can't add the header to videos because there's mirrors, I think the only way to make it work would to have the .vtt file on the fosdem.org domain, and remove crossorigin="anonymous" .

[johanvdw]

Yes, I reverted your patch as you saw.

I don't really understand why the CORS would block vtt and not the videos themselves.
What would happen if we just remove the crossorigin part?

I can push to our staging environment if we want to test that.

[jonatron]

It's annoying but without crossorigin=anonymous, the track .vtt is blocked but the video isn't, checked using devtools:

To proxy the .vtt so it's on the same domain, the nginx conf could look something like:

    location ~* ^/vtt/(.+\.vtt)$ {
        proxy_pass https://video.fosdem.org/$1;
        resolver 8.8.8.8;
    }

Not sure if it's worth it or not, it's only a nice to have, and google chrome has live captions built in to the browser.

[johanvdw]

Rather than proxying, we could upload the VTT as attachments. Op do 13 feb 2025, 09:56 schreef jonatron ***@***.***>:

…

It's annoying but without crossorigin=anonymous, the track .vtt is blocked but the video isn't, checked using devtools: image.png (view on web) <https://github.com/user-attachments/assets/9eaa925a-6be9-46aa-a6dd-100c4fdaaf59> To proxy the .vtt so it's on the same domain, the nginx conf could look something like: location ~* ^/vtt/(.+\.vtt)$ { proxy_pass https://video.fosdem.org/$1; resolver 8.8.8.8; } Not sure if it's worth it or not, it's only a nice to have, and google chrome has live captions built in to the browser. — Reply to this email directly, view it on GitHub <#289 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAGUAUUKFATPREUCJRGMDC32PRMHXAVCNFSM6AAAAABWLVGP6WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNJVHEYDQNJTGI> . You are receiving this because you commented.Message ID: ***@***.***> [image: jonatron]*jonatron* left a comment (FOSDEM/website#289) <#289 (comment)> It's annoying but without crossorigin=anonymous, the track .vtt is blocked but the video isn't, checked using devtools: image.png (view on web) <https://github.com/user-attachments/assets/9eaa925a-6be9-46aa-a6dd-100c4fdaaf59> To proxy the .vtt so it's on the same domain, the nginx conf could look something like: location ~* ^/vtt/(.+\.vtt)$ { proxy_pass https://video.fosdem.org/$1; resolver 8.8.8.8; } Not sure if it's worth it or not, it's only a nice to have, and google chrome has live captions built in to the browser. — Reply to this email directly, view it on GitHub <#289 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAGUAUUKFATPREUCJRGMDC32PRMHXAVCNFSM6AAAAABWLVGP6WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNJVHEYDQNJTGI> . You are receiving this because you commented.Message ID: ***@***.***>

[jonatron]

Oh yeah, that'd work. I didn't realise attachments are on the fosdem.org domain.

[jonatron]

Just having a look attachments and the interaction between sreview and pretalx and website. Attachments are a Resource on a Submission in pretalx. There's an api to add video links https://github.com/FOSDEM/pretalx-integration/blob/v2024.3.1-fosdem/devroom-settings/devroom_settings/views.py#L270 used by https://github.com/FOSDEM/infrastructure/blob/master/ansible/playbooks/roles/encoder-master/files/syncvideos-pretalx . So I guess we'd need another API similar to the one above but to add attachments/resources instead of links to talks/submissions?

[johanvdw]

what, you found the script used for syncing the videos of last year! (I rewrote it, because I didn't)