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

<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">

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

VR/360 Plugin supports projection types: 180, 360, Sphere, equirectangular, Cube, 360 CUBE, 360_LR, 360_TB, EAC, EAC_LR

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

Default projection type is 360. To set other than default projection type see example code below:

<script>
	var player = videojs('player_1)';
	player.nuevo({ 
		//option_name: option_value
	});
	player.vr({projection: 'Cube'});
</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".
• 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
});

You can load Omnitone javascript ambisonic decoder by Google (included in plugins directory) and enable omnitone option to support spatial sound in VR/360 video, e.g.

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