VR/360° Plugin by Nuevodevel

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 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, 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: 180, 360, Sphere, equirectangular, Cube, 360 CUBE, 360_LR, 360_TB, EAC, EAC_LR
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.
player.vr({
	nav: true,
	nav-position: 'right',
	min-zoom: 50,
	max-zoom: 105,
	keys: true
});

Please use video.js player version maximum 7.6 (included). Newer versions of video.js are buggy about animation timeout function.
To stream video from other than production server you must enable CORS on streaming server. https://enable-cors.org/
Check www.nuevodevel.com/plugins/vr360 to learn about player and browsers compatibility, VR/360 limitations, possible issues and suggestions.