Chromium works great, but Safari?

[duzan-spec]

Hello, I tried debugging Safari experience (the video cannot be played). The only thing that I could make it work is frame by frame viewing. Can anybody help with this? This is what my LLM analysed.

1. Executive Summary

The current implementation of the Clapshot video player utilizes a custom JavaScript-based streaming/fetch engine that is incompatible with Desktop Safari’s security model when behind a reverse proxy (specifically Cloudflare Tunnels). While the player functions correctly on Chrome and Firefox, Safari interprets the rapid-fire "Byte-Range" fetch requests as a security/CORS violation, triggering a persistent AbortError and halting playback.

2. Technical Root Causes

The issue is driven by three specific architectural choices in the repository:

Custom Fetch Logic: The player attempts to manage video chunks via fetch() or XHR instead of a standard

Missing Polyfills: The codebase relies on TouchEvent for player logic, which is undefined in Desktop Safari, leading to a ReferenceError that crashes the "Play" function loop.

CORS Conflict: The presence of crossorigin="anonymous" on the video tag forces a strict preflight check that frequently fails or times out when served through a tunnel, resulting in Unhandled Promise Rejection: AbortError.

3. Observed Symptoms

Network Tab: Repeated video.mp4 requests marked in red with a "Canceled" or "Aborted" status.

Console Logs: Persistent AbortError: The operation was aborted and ReferenceError: Can't find variable: TouchEvent.

User Experience: Video remains black/stuck. Manual "stepping" through frames works (bypassing the JS loop), but the "Play" button does nothing.

4. Proposed Source Code Fixes

To resolve this for the Safari community, the following changes are recommended for the .vue or .js player components:

Direct Source Assignment: Bypass URL.createObjectURL(blob) for Safari users and point the src directly to the asset URL.

Strip Security Attributes: Remove crossorigin and preload="auto" to allow the native Safari hardware decoder to handle the stream directly.

Global Polyfill: Add window.TouchEvent = window.TouchEvent || function() {}; to the entry point to prevent desktop-environment crashes.

[elonen]

I think the analysis / proposal isn't quite correct here and/or possibly concerns on older version.

• The player already uses a basic <video src="<video URL>" HTML element, not any explicit fetch magic
• Byte-Range is normal and necessary part of seeking and streaming
• Preload is unlikely to affect this at all
• I didn't see any JS console errors (=> maybe tested on an older version..?)

Trying with Clapshot 0.9.2 on Bookworm through Safari 26.2 on MacOS 15.7.3, I managed to partially reproduce the issue though:

In most cases - but not always - the video image didn't intiailly come up, and playback area remained cyan (background only). Play button usually didn't bring it up either.

However:

• Clicking play button actually always started playing the AUDIO track from speakers
• After seeking and/or stepping the frames a bit, video playback often started working correctly

=> it seems Safari is in fact correctly streaming the file, but there's something odd about (not) showing the video. This means hypotheses about CORS and the other stuff probably aren't the issue - at least not anymore, since commit 7199c8f

[duzan-spec]

Hi, yeah I am running 0.9.2 (Safari 26.2) and i am only able to scroll the video frame by frame. Cyan background happening too, but no Audio coming out or seeking option not working either. Let me know if I can help you beta test this fix (i am not a programmer but I love this project)