Displaying spatial photos and videos on web pages in Safari

The purpose is to create a simple web-based gallery of spatial photos and videos using static html files. I have successfully displayed spatial photos using the img tag and IMG.heic files. I can tap and hold the image to bring up the contextual menu and from there select View Spatial Photo. Is there any way to add a control to the image, like a link or overlay on the image itself, that a user can simply tap to show the image in 3D? And how to host a video file on a web page without going through a CDN/streaming service? Sample html would be much appreciated.

Hey @DevForumPstr,

Thanks for your questions. Please take a look at Optimize for the spatial web from WWDC24. This session introduces you to showing spatial photos on the web the using the element.requestFullscreen() method invoked by a user event.

Additionally, you'll want also watch What’s new for the spatial web from WWDC25. This session covers presenting immersive video. You can embed this media on your website using the existing video element. For 180º, 360º, and wide field-of-view media, the file should conform to APMP. To learn more about APMP, watch Learn about the Apple Projected Media Profile.

Let me know if you have additional questions,
Michael

Displaying spatial photos and videos on web pages in Safari
 
 
Q