Zimit2: YouTube video is not working in Safari (Kiwix JS and PWA)

[benoit74]

PWA: pwa.kiwix.org, 3.3.2
ZIM: https://mirror.download.kiwix.org/zim/.hidden/dev/mes-quartiers-chinois_fr_all_2024-05.zim
Safari: 17.5 on MacOS Sonoma 14.5 (both also observed by @Jaifroid on iPhone 15 Pro Max with iOS 17 Safari

The Youtube video (see eg. Girona article) does not plays while it does on pwa on Firefox for instance, and on many other readers.

Issue is reproduced as well on other Zimit2 ZIMs (e.g. https://dev.library.kiwix.org/viewer#100rabbits_en_2024-05, look for Orca page).

Same video from same ZIM works on same Safari from same machine when using kiwix-serve to view the content.

I suspect this is a problem linked to bad PWA behavior on Safari.

[Jaifroid]

Thanks @benoit74 for isolating that. I'll look into it. I hadn't tested on macOS yet, only on Safari for iOS. Note I don't do any processing of video in the PWA or Browser Extesnion for Zimit2, and I don't block Safari in any way. The URL transformations are happening in the code loaded from the ZIM, not in the PWA loading code, but I'll check this.

[benoit74]

I'm more inclined toward a weird Safari/JS bug linked to PWA + Youtube player JS + Safari.

Nota: should it help you, video is served at https://dev.library.kiwix.org/content/mes-quartiers-chinois_fr_all_2024-05/youtube.fuzzy.replayweb.page/videoplayback%3Fid%3Do-AB_-44JyE8Kx3EbRwXtKcWWsfTqj9tDWRqJCbisVNt8A

[Jaifroid]

Thanks, I reproduce the issue with Girona video on macOS Ventura on Safari 17.1 with both https://pwa.kiwix.org and https://browser-extension.kiwix.org (this is the PWA that underlies the Browser Extensions in ServiceWorker mode).

I also confirm that that the video works in same machine and OS in Firefox in the PWA and in browser-extension.kiwix.org.

And I've checked that in the Kiwix Serve version of the mequartierschinois ZIM the video works in Safari on iPad, iPhone and macOS, all using Safari 17+.

So we have some weird bug only in Safari when the videos are being served from a Service Worker that extracts the content from the ZIM. I need to check if we're setting headers for partial video content inside the Service Worker when the BLOB is returned from the ZIM. It's possible Safari doesn't understand the way headers are being set, whereas Firefox and Chrome do. That's the only place I can think of where any "processing" occurs. Needs debugging...

[benoit74]

Good luck !

Might be an issue on how zimit2 writes something where Safari is less permissive than Firefox and Chrome.

But at least I need your help to investigate, I lack skills in debugging Service Workers.

If it looks like the issue you find is not likely to be produced by another scraper, then I don't mind to implement the fix in zimit2. At least I would prefer you do not have something like "if zimit2_zim then ..." in your codebase.

[Jaifroid]

No, don't worry, I wouldn't do that, not when it's working fine in two of the three most important browsers. I'll share any solution I find, but I suspect it will be specific to the emulation of a steaming server inside our Service Worker.

[Jaifroid]

Potentially related discovery: TED Talks video appears not to work on iOS Safari (17+) in Kiwix Serve. N.B. it works on macOS Safari. E.g. https://library.kiwix.org/viewer#ted_en_playlist-5-questions-about-climate-change_2022-08/index on an iPhone or iPad (tested via BrowserStack Live). Nothing very informative in console log except some information about a WASM compile failure (which seems odd, because Kiwix Serve doesn't rely on WASM, but it could be something in the ZIM that is trying to compile a player, possibly video-js). I'll check for such an issue on the relevant Repo and open one if there is none, but I'm documenting it here as well.

[Jaifroid]

No obvious issues on kiwix-tools, openzim/ted or openzim/youtube Repos. Since Zimit2 video works in Kiwix Serve on iOS, it doesn't appear to be a Kiwix Serve issue, And it's probably more generic than TED. It's probably somewhere upstream in a component of the video player used.

[benoit74]

Videos from TED and youtube are known to have problems on Safari with WebM preset v1. Issues have already been solved and closed (openzim/ted#145 and openzim/youtube#181 and openzim/youtube#33).

These videos should be reencoded with WebM preset v2 (few have been in dev library, e.g. https://dev.library.kiwix.org/viewer#ted_mul_humanities_2024-04) but we are not yet releasing it into the wild because we suspect we might transition soon to a preset v3 based on VP9 (instead of VP8).

You most probably already know it, but note that youtube/ted setup is totally different from Zimit because:

• in youtube / ted the video is reencoded by us where we keep the raw stream in zimit
• in youtube / ted we use the video.js player where we keep the original player in zimit (Youtube player here)

WebM preset used: https://github.com/openzim/python-scraperlib/blob/7d498319baadba715316c15cf9857ff2f6974a00/src/zimscraperlib/video/presets.py#L33

Issue about VP9 transition: openzim/python-scraperlib#79

[Jaifroid]

@benoit74 Thank you for the very helpful info. I was aware that TED/YouTube use webm and the zimit2 whatever was scraped (usually mp4), but thought that it might be some common Safari issue that is also hitting me. I think that's pretty much ruled out now, but it'll be useful to test KJS playback of the new VP8 format on Safari to help isolate what's going wrong in the KJS readers (or to find out what works). 🙏

[Jaifroid]

The videos in ZIM ted_mul_humanities_2024-04 play in the PWA on Safari 17 on iOS/iPhone 15 Max Pro (apart from exhibiting the bug mentioned here: openzim/ted#145 (comment) - you have to exit fullscreen, then play inline). This at least gives some basis for finding out how to serve zimit2 video in an iOS-Safari-friendly way in the KJS Service Worker, albeit video.js is probably doing some fancy stuff and it's webm not mp4.

[Jaifroid]

Note: video on Safari on iOS in Browser Extension and PWA now works with YouTube videos in the new format. I didn't do anything, it's the new format that now works fine. Tested on project-fuel_en_2024-08.zim. Not sure what the significance of this is for Zimit2, if at all, but it's good to know it can be played.

[benoit74]

project-fuel is a youtube ZIM, not zimit 😞

[benoit74]

(youtube ZIM are not using the youtube player which is used in website scraped by zimit, it directly loads the video with video.js player)

[Jaifroid]

project-fuel is a youtube ZIM, not zimit 😞

Yes, I was aware of that, but as videos didn't work reliably (with big bugs) before on Safari iOS (in PWA / KJS), and now they work perfectly with the new format, I was hopeful that there might be a common underlying cause. But I was also pretty doubtful, just wanted to confirm with you that the fix was completely unrelated, which it seems it is. Thank you!