aiden/VR-Web-Player
1
0
Fork 0
forked from EXT/VR180-Web-Player
Code Actions Activity

added image support

Browse Source
This commit is contained in:
Aiden
2026-06-10 12:48:36 +10:00
parent 24a166046e
commit 030a8b724b
13 changed files with 477 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
README.md
View File

@@ -1,10 +1,10 @@
# VR Web Player
A CDN-friendly web player for side-by-side stereoscopic video.
A CDN-friendly web player for side-by-side stereoscopic video and still images.
The player supports two projection modes:
- `vr180`: an immersive 180 degree stereoscopic hemisphere in WebXR, with a draggable rectilinear fallback on non-XR browsers.
- `plane`: a flat stereoscopic video plane in WebXR, with a normal flat left-eye fallback on non-XR browsers.
- `plane`: a flat stereoscopic media plane in WebXR, with a normal flat left-eye fallback on non-XR browsers.
## How to use it
Build the player first, then host the generated `vr180player/` directory on your CDN and include the module script. The script automatically loads its matching CSS file from the same folder, and it imports its helper modules with relative module paths.
@@ -29,17 +29,31 @@ Use `data-projection="plane"` for flat 3D video on a rectangular plane:
</div>
```
Only one player is supported per page in this version. The player logs a clear console message and does not initialize if no `[data-vr-web-player]` container is found, if multiple containers are found, if the container has no video, or if `data-projection` is not `vr180` or `plane`.
Use an `img` element for a static SBS image:
## Video format
This version supports 2:1 side-by-side video using H.264 or HEVC in an mp4 file. It does not support over-under, MV-HEVC, APMP, or `.aivu`.
```html
<div data-vr-web-player data-projection="plane">
<img src="sbs-image.png" alt="Demo image" title="Demo Image" crossorigin="anonymous">
</div>
```
Only one player is supported per page in this version. The player logs a clear console message and does not initialize if no `[data-vr-web-player]` container is found, if multiple containers are found, if the container does not contain exactly one supported media element, or if `data-projection` is not `vr180` or `plane`.
## Media format
This version supports side-by-side media only:
- Video: 2:1 side-by-side video using H.264 or HEVC in an mp4 file.
- Image: side-by-side still images in browser-supported image formats such as PNG, JPEG, or WebP.
It does not support over-under, MV-HEVC, APMP, or `.aivu`.
## How it works
When the page loads, the video is embedded normally with a play button over the poster frame. When the user clicks play, the player checks for `navigator.xr` and `immersive-vr` support.
When the page loads, the media is embedded normally with an entry button over it. When the user clicks the button, the player checks for `navigator.xr` and `immersive-vr` support.
- In WebXR, `vr180` maps the left and right halves of the SBS video onto the matching eyes of a 180 degree sphere.
- In WebXR, `plane` maps the left and right halves onto the matching eyes of a floating 16:9 video plane.
- Outside WebXR, both modes render only the left half of the SBS video so viewers do not see the raw double image.
- In WebXR, `vr180` maps the left and right halves of the SBS media onto the matching eyes of a 180 degree sphere.
- In WebXR, `plane` maps the left and right halves onto the matching eyes of a floating 16:9 plane.
- Outside WebXR, both modes render only the left half of the SBS media so viewers do not see the raw double image.
- Static images show only applicable controls; playback, seek, and mute controls are video-only.
- Control icons are embedded from [Lucide](https://lucide.dev/) SVG definitions, so no PNG icon assets are required.
## Demo