Electroteque Media

Stereoscopic VR Video

Stereo Rendered Video in monoscopic and VR

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

Side to side is the default configuration which can be changed to top and bottom with sidetoside: false

The clip config is required to be configured as a stereo video with projection set to 360_TB or 360_LR

Stereo Video

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-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"></video>
  </div>

  <script type="text/javascript">

  	var player = videojs("stereo", {
    "plugins": {
        "vrvideo": {
            "projection": "360_TB",
            "scaleFullscreen": false,
            "scaleResize": false
        }
    },
    "sources": [
        {
            "src": "//videos.electroteque.org/360/stereo_demo.webm",
            "type": "video/webm"
        },
        {
            "src": "//videos.electroteque.org/360/stereo_demo.mp4",
            "type": "video/mp4"
        }
    ]
});

  </script>