VR-Web-Player/README.md

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.

<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:

<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.