Safari on iOS 15 inline video playback issues

Question

A webpage containing video element with src attribute set to a Data URI containing a video file does not play the video in Safari on iOS 15.

Inspecting the device/simulator with Safari Dev Tools suggests the browser repeatedly issues requests with Range: bytes N-M headers, reading the whole video file multiple times, leading to huge memory consumption and eventual failure to start the playback.

If the video is small enough and does manage to start, the playback appears sluggish and takes enormous time to even start.

Is there any workaround for this problem?

P.S. Keeping the video in Data URI is inherent to the task I am trying to solve, so please refrain from suggesting to keep the video file as a separate resource :)

Answer 1

The webkit bug tracking this issue is here (looking at the user names I suspect you reported it over there too): https://bugs.webkit.org/show_bug.cgi?id=232076

The workaround we used was to use a Service Worker to deliver the video data via a "normal" URL, even though the data was still provided directly from Javascript. I posted some sample code for the service worker side on that WebKit bug.

The service worker does need to be hosted as a separate resource, and with the same https origin, so I know that won't be a solution for every use case (including yours Anton).

Unfortunately I don't think there are any other workarounds, it just looks like yet another Safari regression. iOS 15 has been particularly bad for that. I almost expect it to be a slide in the iOS 16 keynote... "Safari is now 25% faster, plays back videos for 30% more hours, and now has 35% more bugs than ever before!"