360 degree panorama video demo with VR support

Please use your mouse or a finger on touchscreen to move around 360 degree


USA/New York Time

Video Js demo for 360 degree panorama video

Among Video Js player plugins on Github you can find one which enables VR 360 degree panorama videos support, icluding 2D/3D switch.
All you need is to include plugin stylesheet and javascript files in you rplayer setup code. First include videojs-panorama.css theme stylesheet in the head of your website page, right after video-js stylesshet.
<link href="//path/to//video-js.min.css" rel="stylesheet">
<link href="//path/to//videojs-panorama.min.css" rel="stylesheet">

Player code setup with "panorama" scripts should look like:

<script type=text/javascript" src="//path/to//video.min.js"></script>
<script type=text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.js"></script>
<script type=text/javascript" src="//path/to//videojs-panorama.v5.min.js"></script>
<script type=text/javascript" src="/nuevo.min.js"></script>

<video id="myplayer" class="video-js vjs-default-skin" poster="/cover.jpg" controls preload="auto">
  <source src="//path/to//video.mp4<" type="application/x-mpegURL">
</video>

<script>
var player = videojs('myplayer',nuevo,function(){ 
	this.nuevoPlugin({
		plugin options here,
	});
	this.panorama({
		clickAndDrag: true
	});
});
</script>


Note that you must include 2 new javascript files" "three.js" from cloudflare resources and "videojs-panorama.v5.min.js" hosted on server. You also need to activate panorama plugin as you can see in our player setup code above.

Since Video Js player with Nuevo theme differs a lot from default theme, we suggest to download and use plugin files from Nuevolab resources which you can download HERE.

For full documentation and possible options of "video.js panorama plugin please check original development source on Github page.