Videojs VR 360 plugin

360°/VR video test

Actually the VR/360 plugin is available fo video.js version 7x only.The latest version is 7.21.5

Use your mouse or a finger on the touchscreen to move around 360 degrees. Use a mouse wheel or fingers to zoom in on the VR view. Use the Cardboard button on the 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-degree perspective changes with an ease effect when moused down and moved in desktop browsers or when touched and moved on the touchscreen.
Experimental GyroscopeMotion integration on mobile devices: The perspective changes as you rotate your phone.
Experimental Cardboard/VR mode support: On devices that support it, the Cardboard viewer icon adjusts the projection to work with Cardboard-style VR goggles.
Zoom perspective is supported when a mousewheel is used on desktop browsers.
Perspective 2D navigation buttons (optional in the 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 types: 180, 180_MONO, 360, Sphere, equirectangular, Cube and, 360 CUBE, 360_LR, 360_TB, EAC, and EAC_LR

The default projection type is "360." You can change the projection type through the VR plugin option.

Code snippet

<script>
var player = videojs("my_player");
player.vr({projection:"EAC"});
</script>

You can decide to hide the VR navigation widget (option nav).

Code snippet

<script>
player.vr({nav:false});
</script>

You can show the navigation VR widget in the top left corner instead of the top right.

Code snippet

<script>
player.vr({nav_position:"left"});
</script>

Motion/gyro support on mobile devices is enabled by default. To disable it, you can set the appropriate option to false, e.g.

Code snippet

<script>
player.vr({ motionControls:false });
</script>

The plugin supports spatial sound through the Omnitone library by Google, a JavaScript implementation of an ambisonic decoder. You need to load the Omnitone script (included in the plugins directory) and enable the VR/360 plugin omnitone option.

Code snippet

<script src="//domain.com/videojs/plugins/omnitone.js"></script>
<script src="//domain.com/videojs/video.min.js"></script>
<script src="//domain.com/videojs/nuevo.min.js"></script>
<script src="//domain.com/videojs/plugins/videojs.vr.js"></script>
<script>
var player = videojs('myplayer');
player.nuevo({ option1: "value", option2: "value" });
player.vr({ projection:"360", omnitone: true });
</script>

Limitations, issues, suggestions

MP4 videos are preferred over HLS for videos to use the VR plugin.
A 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 the streaming server is required if it's not the production server. Additionally you must set crossorigin="anonymous" attribute for the <video> element.
On iOS, you need to set the preload attribute for the <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 360°/VR animation speed and performance depend mainly on the machine's CPU and browser.