Vodeojs VR 360 plugin

Single domain license € 20.00 (includes subdomains)

Buy now

Use your mouse or a finger on touchscreen to move around 360 degrees. Use mouse wheel or fingers to zoom VR view. Use the Cardboard button on touchscreen to enter Carboard VR fullscreen mode.
Use the navigation control or keyboard (arrows and Home keys) to control 3D Perspective.

Key features

Smooth 360 perspective changes with ease effect when mouse down and moved in desktop browsers or when touched & moved on the touchscreen.
Experimental Gyroscope motion integration on mobile devices: The perspective changes as you rotate your phone. On Apple devices since iOS version 12.2 accelerometer and gyroscope sensor access is disabled by default. You need to enable "Motion and Orientation Access" in Safari Privacy Settings.
Cardboard/VR mode support: On devices that support it, the Cardboard viewer icon adjust the projection to work with Cardboard-style VR goggles.
Zoom perspective support when a mousewheel used on desktop browsers.
Perspective 2D navigation buttons (optional in desktop player's left or right top corner) to change the view horizontally and vertically, or reset perspective view to start position.
Perspective 2D keyboard navigation using arrow and Home keys (optional).
Support for projection type: 180, 180_MONO, 360, Sphere, equirectangular, Cube and 360 CUBE, 360_LR, 360_TB, EAC, EAC_LR.

Player compatibility

Compatible with default Videojs player and skin version 7.x.
Compatible with Videojs player v7.x + Nuevo plugin.
Compatible with all skins by Nuevodevel.com.

Browsers compatibility

Chrome Desktop
Chrome Mobile (on Android 6+)
Firefox Desktop
Edge
Safari Desktop (with video crossorigin="anonymous" attribute)
Safari Mobile (iOS 11.2+)
Internet Explorer (pseudo perspective)

Why Videojs and 360°/VR Plugin by Nuevodevel?

Because most of available HTML5 players are either missing 360°/VR support, or such support is buggy in several places or missing useful functions. Finally, because some 3rd party 360°/VR plugins are very expensive and not same easy to configure.

Limitations, issues, suggestions

MP4 videos are preferred over HLS for videos to use VR plugin.
Single bitrate (MP4 or HLS) is required for 360/VR playback
High resolution video is required since only a small part of the video is rendered in the player at one time.
CORS enabled on streaming server is required if it's other than production server.
Additionally you must set "crossorigin="anonymous"" attribute for <video> element.
On iOS you need to set the preload attribute for <video> element to render video correctly.
The 360°/VR Plugin does not work with the iOS native player. It is recommended to set the playsinline <video> attribute for non-fullscreen video playback.
The 360°/VR Plugin does not work with multiple players on the same page. Multiple iframed players will function correctly.
The 360°/VR Plugin does not support DRM.
The core 360°/VR Plugin does not work in Internet Explorer. However plugin by Nuevodevel offers pseudo 360° perspective playback, with mouse screen drag, 2D navigation and keyboard support.
The 360°/VR animation speed and performance depends mainly on the machine's CPU and browser.

Not every mobile device supports Accelerometer and gyroscope sensor. Also access to Accelerometer and gyroscope may differ from device to device, from system to system version. On Apple devices since iOS version 12.2 accelerometer and gyroscope sensor access is disabled by default. You need to enable "Motion and Orientation Access" in Safari Privacy Settings. Since iOS version 13, "Motion and Orientation Access" option was removed completely and access to "Motion and Orientation" requires manual acceptance. If user ignore or deny "Motion and Orientation" request, the appropriate modal dialog will not appear any more until you clear the browser's cache. An Accelerometer and Gyroscope can be enabled only for the safe https protocol.

360°/VR plugin works same well with the Videojs + Nuevo plugin and Nuevo skins. Check the demo here.