Vision Pro Safari WebXR video playback not working

The Safari version for VisionOS (or spatial computing) supports WebXR, as reported here. I am developing a Web App that intends to leverage WebXR, so I've tested several code samples on the safari browser of the Vision Pro Simulator to understand the level of support for immersive web content.

I am currently facing an issue that seems like a bug where video playback stops working when entering an XR session (i.e. going into VR mode) on a 3D web environment (using ThreeJS or similar). There's an example from the Immersive Web Community Group called Stereo Video (https://immersive-web.github.io/webxr-samples/stereo-video.html) that lets you easily replicate the issue, the code is available here. It's worth mentioning that video playback has been successfully tested on other VR platforms such as the Meta Quest 2.

The issue has been reported in the following forums:

Post not yet marked as solved Up vote post of FilipePires98 Down vote post of FilipePires98
1.6k views
Posted by
FilipePires98
Reply
Add a Comment

Replies

ok so believe it or not i've been researching a solution to this same problem and came across some folks who have apparently solved this... the uh adult video sites. I've seen a handful implementations with video and audio playing back in immersive mode on AVP.

IDK how to share the link because it's nsfw but i could privately message it if you contact pasquale at lingonberry dot ai

Posted by
pasqualedsilva
Up vote reply of pasqualedsilva Down vote reply of pasqualedsilva
Add a Comment

In the webxr session start event, forcing video/audio element playback works. Now need to detect for visionOS to do that. actually you can't detect what platform visionOS is. navigator.platform reports Ipad. So have to check if it's Ipad in WebXR and force play.

Posted by
danrossi1
Up vote reply of danrossi1 Down vote reply of danrossi1
Add a Comment

pseudo code. the platform detected goes between Ipad and MacIntel.

onSessionStart() { //force play for visionOS if (this.isIpad) { // this.video.play();

        const handlePaused = () => {
            this.video.removeEventListener("pause", handlePaused);
            this.video.play();
        };

        this.video.addEventListener("pause", handlePaused);


    }

}

Posted by
danrossi1
Up vote reply of danrossi1 Down vote reply of danrossi1
Add a Comment

hi, not sure how to reach out to you but id love to learn more about your journey as a webxr dev and what kind of things you expect for content distribution at scale on the web. i imagine you-d want your webxr experiences to be in front of as many folks as possible?

Posted by
apetru
Up vote reply of apetru Down vote reply of apetru
Add a Comment