Video playback fails on PWA after reopening stuck on first frame

I have observed this issue on iOS PWAs:

1. Add the web app (e.g. TikTok or my own) to the Home Screen (“Add to Home Screen”).

2. Open the PWA for the first time: video playback works correctly.

3. Close the PWA / background it. Then reopen it from Home Screen the video does not restart, it remains stuck on the first frame (or poster image), and does not respond to play.

In the case of TikTok, I inspected their video element inside the PWA; here is an example:

<video

class=""

autoplay=""

playsinline=""

x5-playsinline="true"

webkit-playsinline="true"

mediatype="video"

data-index="-1"

data-xgplayerid="…"

poster=""

preload="auto"

src="blob:https://www.tiktok.com/332a067a-652c-4772-a27b-22b8c9abc094"

style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:3; object-fit:cover;">

</video>

Notably, TikTok uses a blob URL as the video source via JavaScript / buffer, which may help avoid this PWA playback reset issue.

Reproduction example (my component from my app workoutgen):

<video

ref={videoRef}

key={video}

className="h-screen w-screen sm:w-full bg-black object-cover"

style={{ backgroundColor: "#000000" }}

src={video}

poster={image}

preload="metadata"

crossOrigin="anonymous"

muted

loop

playsInline

autoPlay

disablePictureInPicture

disableRemotePlayback

tabIndex={-1}

draggable={false}

aria-label={`Video for ${name} exercise`}

x-webkit-airplay="deny"

webkit-playsinline="true"

/>

This works fine at first, but after closing and reopening the PWA on iOS, the video will not resume.

Additional context and observations:

• The bug appears specific to iOS PWAs: after resuming, video playback fails.

• Some users mention that clearing Safari’s cache “resets” the playback, hinting at internal caching or state issues.

• WebKit bug reports exist about media playback issues in PWAs when an app returns to the foreground (for example, bugs involving getUserMedia() streams).

• The difference in using a blob-based video URL (rather than a direct HTTP URL) suggests TikTok may bypass the bug by injecting video via JavaScript/MediaSource.

Impact:

• Users on iOS may find the PWA unusable after the first session if they cannot watch the video again.

• This issue degrades the user experience significantly on iOS devices for apps relying on video content.

Suggested investigation / mitigation ideas:

• Investigate using blob URLs (e.g. URL.createObjectURL) or MediaSource API to feed the video buffer instead of direct HTTP src.

• Add event listeners for visibilitychange or PWA resume, then call video.load() + video.play() or reassign the source.

• Force a “reset” of the video source on resume (e.g. set src = "", then reassign, then load() + play()).

• Test across multiple iOS 26 versions (e.g. 26.0, 26.0.1, 26.0.2) to confirm the issue is persistent.

• Provide a minimal reproduction page (bare HTML + video) to WebKit / Apple for debugging.