Videojs VR 360 plugin

360°/VR video test

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

Key features

Smooth 360 perspective changes with ease effect when mouse down and moved in desktop browsers or when touched & moved on the 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 a mouse wheel used on desktop browsers.
Perspective 2D navigation buttons (optional in desktop player's left or right top corner) to change the 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, 180_MONO, 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>

Motion/gyro support on mobile devices is enabled by default. To disable it you can set appropriate option to false, eg.

Code snippet

<script>
player.vr({ motionControls:false });
</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 the 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>
<script>
var player = videojs('myplayer');
player.nuevo({ option1: "value", option2: "value" });
player.vr({ projection:"360", omnitone: true });
</script>



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 the 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 the default videojs demo here