VR/360° Plugin by Nuevodevel

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

Basic Code Setup

<!--Load CSS in the HEAD of your website-->
<link href="../videojs/skins/nuevo/videojs.min.css" rel="stylesheet" type="text/css" />
<link href="../videojs/plugins/videojs.vr.css" rel="stylesheet" type="text/css" />

<!--Load videojs and nuevo plugin + VR plugin -->
<script type="text/javascript" src="../videojs/video.min.js"></script>
<script type="text/javascript" src="../videojs/nuevo.min.js"></script>
<script type="text/javascript" src="../videojs/plugins/videojs.vr.js"></script>

<!--Video tag setup-->
<video id="player_one" class="video-js vjs-fluid vjs-default-skin" controls preload playsinline poster="images/poster.jpg">
	<source src="video/vr.mp4" type="video/mp4">
</video>

<!--Initialize the player and plugins, don't forget to disable Nuevo plugin's option zoomMenu-->
<script>
	var player = videojs('player_1)';
	player.nuevo({ 
		zoomMenu:false,
		//option_name: option_value
	});
	player.vr();
</script>

VR/360 Plugin supports projection types: 360, Sphere, equirectangular, Cube and 360 CUBE.
Default projection type is 360. To other projection type see example code below:

<script>
	var player = videojs('player_1)';
	player.nuevo({ 
		//option_name: option_value
	});
	player.vr({projection: 'Sphere'});
</script>

There are few other settings options available for VR/360 plugin.

• nav - Set false if you do not want manual VR navigation. Default value is "true"
• nav-position - Shows manual navigation in "right" or "left" top corner. Default value is "right".
• min-zoom - Minimum zoom value when mousewheel over video. Default value is 50.
• max-zoom - Maximum zoom value when mousewheel over video. Default value is 105.
• keys - Enables arrow keyboard hotkeys to move around scene. To disable hotkey set this option to "false".

player.vr({
	nav: true,
	nav-position: 'right',
	min-zoom: 50,
	max-zoom: 105,
	keys: true
});