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 player and VR css, videojs and Nuevo + VR plugin -->




<script src="../videojs/video.min.js"></script>
<script src="../videojs/nuevo.min.js"></script>
<script src="../videojs/plugins/videojs.vr.js"></script>

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

<!--Initialize the player and plugins-->
<script>
	var player = videojs('player_1)';
	player.nuevo({ 
		zoomMenu:false,
		//option_name: option_value
	});
	player.vr();
</script>

• '180' - The video is half sphere and the user should not be able to look behind themselves
• '360', 'Sphere', or 'equirectangular' - The video is sphere
• 'Cube' or '360_CUBE' - The video is cube.
• '360_LR' - Used for side-by-side 360 videos
• '360_TB' - Used for top-to-bottom 360 videos
• 'EAC' - Used for Youtube Equi-Angular Cubemap videos
• 'EAC_LR' - Used for Youtube side-by-side Equi-Angular Cubemap videos

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

• 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".
• minZoom - Minimum zoom value when mousewheel over video. Default value is 50.
• maxZoom - 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".
• omnitone - Disabled by default. Enable (omnitone:true) if spatial sound available.
• motionControls - Enabled by Default. Set to false to top motion/gyro on mobile device.

player.vr({
	nav: false,
	keys: false,
	omnitone:true,
	motionControls: false
});

<script src="../videojs/video.min.js"></script>
<script src="../videojs/nuevo.min.js"></script>
<script src="../videojs/plugins/omnitone.js"></script>
<script src="../videojs/plugins/videojs.vr.js"></script>
<script>
var player = videojs('player_1)';
player.nuevo({ 
		//option_name: option_value
});
player.vr({
	projection: "EAC",
	omnitone: true
});
</script>