Videojs VR 360 plugin

360° / VR video through Videojs and Nuevo plugin

Use your mouse or a fingers on touchscreen to move around 360 degrees. Use mousewheel or fingers to zoom VR view.
Use Cardboard button on touchscreen to enter Carboard VR fullscreen mode.
Use navigation control or keyboard (arrows and Home keys) to control wD Perspective.

Key features

  • Smooth 360 perspective changes with ease effect whn mouse down and moved in desktop browsers or when touched & moved on touchscreen.
  • Experimental Gyroscope motion integration on mobile devices: The perspective changes as you rotate your phone.
  • Experimental Cardboard/VR mode support: On devices that support it, the Cardboard viewer icon adjust the projection to work with Cardboard-style VR goggles.
  • Zoom perspective support when mousewheel used on desktop browsers.
  • Perspective 2D navigation buttons (optional in desktop player's left or right top corner) to change view horizontally and vertically, or reset perspective view to start position.
  • Perspective 2D keyboard navigation using arrow and Home keys (optional).
  • Support for projection types: 180, 360, Sphere, equirectangular, Cube and 360 CUBE, 360_LR, 360_TB, EAC, EAC_LR
The default projection type is "360". You can change projection type through VR plugin option.
Code snippet
<script>
  var player = videojs("my_player");
  player.vr({projection:"EAC"});
</script>
You can also decide to hide VR navigation widget (option nav)
Code snippet
<script>
   player.vr({nav:false});
</script>
You can show navigation VR widget in top left corner instead of top right.
Code snippet
<script>
   player.vr({nav_position:"left"});
</script>

Since version 4.0 VR/360° plugin supports spatial sound through Omnitone library by Google, a JavaScript implementation of an ambisonic decoder. You need to load Omnitone script (included in plugins directory) and enable VR/360 plugin omnitone option.
Code snippet
<script src="//domain.com/videojs/plugins/omnitone.js"></script>
<script src="//domain.com/videojs/video.min.js"></script>
<script src="//domain.com/videojs/nuevo.min.js"></script>
<script src="//domain.com/videojs/plugins/videojs.vr.js"></script>

var player = videojs('myplayer');
player.nuevo({ option1: "value", option2: "value" })'
player.vr({ projection:"360", omnitone: true });


When VR plugin used with Nuevo plugin it is important to disable Nuevo plugin's ZOOM option, zoomMenu: false, as it conflicts with VR zoom and navigation.

Not every mobile device supports Accelerometer and gyroscope sensor. ALso access to Accelerometer and gyroscope may differ from device to device, from system to system version. On Apple devices since iOS version 12.2 accelerometer and gyroscope sensor access is disabled by default. You need to enable "Motion and Orientation Access" in Safari Privacy Settings. Since iOS version 13, "Motion and Orientation Access" option was removed completely and access to "Motion and Orientation" requires manual acceptance. If user ignore or deny "Motion and Orientation" request, the appropriate modal dialog will not appear any more until you clear browser's cache. An Accelerometer and Gyroscope can be enabled only for the safe https protocol.
360°/VR plugin works same well with Nuevo plugin and every Nuevo skin
It also works same without Nuevo plugin using default videojs player and skin.
For information about browsers compatibility, limitations, suggestions visit default videojs demo here