forked from EXT/VR180-Web-Player
46 lines
2.2 KiB
Markdown
46 lines
2.2 KiB
Markdown
# VR Web Player
|
|
A CDN-friendly web player for side-by-side stereoscopic video.
|
|
|
|
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.
|
|
|
|
## How to use it
|
|
Include the module script from your CDN. The script automatically loads its matching CSS file and image assets from the same folder.
|
|
|
|
```html
|
|
<div data-vr-web-player data-projection="vr180">
|
|
<video poster="poster.jpg" title="Demo Video" crossorigin="anonymous" playsinline preload="metadata">
|
|
<source src="sbs-video.mp4" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
|
|
<script type="module" src="https://cdn.example.com/vr180player/vr180-player.js"></script>
|
|
```
|
|
|
|
Use `data-projection="plane"` for flat 3D video on a rectangular plane:
|
|
|
|
```html
|
|
<div data-vr-web-player data-projection="plane">
|
|
<video poster="poster.jpg" title="Demo Video" crossorigin="anonymous" playsinline preload="metadata">
|
|
<source src="sbs-video.mp4" type="video/mp4">
|
|
</video>
|
|
</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`.
|
|
|
|
## 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`.
|
|
|
|
## 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.
|
|
|
|
- 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.
|
|
|
|
## Demo
|
|
Open this repository's `index.html` through a local web server and switch `data-projection` between `vr180` and `plane` to test both modes.
|