forked from EXT/VR180-Web-Player
56 lines
2.6 KiB
Markdown
56 lines
2.6 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
|
|
Host the whole `vr180player/` directory on your CDN, then include the module script. The script automatically loads its matching CSS file and image assets from the same folder, and it imports its helper modules with relative module paths.
|
|
|
|
```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.
|
|
|
|
## Development
|
|
The player source is TypeScript in `src/vr180player/`. Build the CDN-ready JavaScript files into `vr180player/` with:
|
|
|
|
```sh
|
|
npm install
|
|
npm run build
|
|
```
|
|
|
|
Edit the TypeScript source files rather than the generated JavaScript files in `vr180player/`.
|