Electroteque Media

Stereoscopic 180 VR Video

Stereo 180 Rendered Video in monoscopic and VR

This example demonstrates confguring a rendered stereo 180 top / bottom. Either as monoscopic or in VR.

Left and right stereo can be configured with a projection config with 180_LR

For 180 videos a half sphere is created. The surrounding background can display a sky dome using the skyDomeURL config. 

NOTE: For Quest headsets with native layers, an AR WebXR immersive mode is used. Therefore a skydome is required to hide the AR camera until VR mode can be used.

For Video.JS in responsive mode. Stereo videos require ratio scaling padding added to the css selector .stereo-dimensions.vjs-fluid where stereo is the ID of the container. To display 16:9 ratios due to a Video.JS bug. Scaling is also required to be disabled.

.stereo-180-dimensions.vjs-fluid {
    padding-top: 56.25%;
}

    <div class="flex w-full h-auto my-auto">
      <video class="video-js vjs-default-skin vjs-fluid " crossorigin="anonymous" controls="" id="stereo-180"></video>
  </div>

  <script type="text/javascript">

  	var player = videojs("stereo-180", {
    "plugins": {
        "vrvideo": {
            "projection": "180_TB",
            "scaleFullscreen": false,
            "scaleResize": false,
            "skyDomeURL": "../../images/front.jpg"
        }
    },
    "sources": [
        {
            "src": "https://oculus-mp4.s3.amazonaws.com/immersive+video+8K+for+Oculus+Browser/everestvr_6.2k_30s_180_TB_h264_crf27_CREDIT_JON_GRIFFITH-injected.mp4",
            "type": "video/mp4"
        }
    ]
});

  </script>