VR

Note

this repo is migration of videojs-vr to plyr

https://plyr-vr.netlify.com

![]()
![]()
![]()


A plyr plugin that turns a video element into a HTML5 Panoramic 360 video player. Project video onto different shapes. Optionally supports Oculus Rift, HTC Vive and the GearVR.

Lead Maintainer: Brandon Casey @brandonocasey

Maintenance Status: Stable




- Installation
- Browser Support
- Caveats
- Projection support
- Usage
-


`

$3

When using with Browserify, install plyr-vr via npm and require the plugin as you would any other module.

`js
var Plyr = require('plyr');

// The actual plugin function is exported by this module, but it is also
// attached to the Player.prototype; so, there is no need to assign it
// to a variable.
require('plyr-vr');

var player = new Plyr('my-video-css-selector');

player.vr({projection: '360'});
`

$3

When using with RequireJS (or another AMD library), get the script in whatever way you prefer and require the plugin as you normally would:

`js
require(['plyr', 'plyr-vr'], function(Plyr) {
var player = new Plyr('my-video-css-selector');

player.vr({projection: '360'});
});
`

Setting a global projection

If you are only going to be playing 360 videos you can set the global plugin projection like so:

`js

var player = new Plyr('my-video-css-selector');

player.vr({projection: '360'});

// or change player.vr.defaultProjection
// and call player.vr.initScene again

`

$3

Set player.mediainfo and player.mediainfo.projection to a valid projection value and pass in 'AUTO' or nothing for the projection key when initializing this plugin.
EX:
`js
var player = new Plyr('my-video-css-selector');

if (!player.mediainfo) {
player.mediainfo = {};
}

if (!player.mediainfo.projection) {
player.mediainfo.projection = '360';
}

player.vr({projection: 'AUTO'});

// or player.vr(); since 'AUTO' is the default
`

Oculus Rift and HTC Vive Support

This project leverages the webvr-polyfill and three.js libraries to create a 'responsive VR' experience across multiple devices.

Oculus Rift and HTC Vive playback requires Firefox >= 55, experimental WebVR-enabled builds of Chromium, or via Chrome by enabling webvr in chrome://flags. Go to WebVR.info for more info.

GearVR playback requires the latest Samsung Internet for Gear VR with WebVR support enabled. Go here for more info.

Accessing the Camera Position

The Three.js rotation values are exposed under the property cameraVector on the vr plugin namespace.

`js
var player = new Plyr('my-video-css-selector');

player.vr().cameraVector;
`

Accessing THREE.js objects

The Three.js Scene, renderer, and perspective camera are exposed under the threeJs object as the properties scene, renderer, and camera on the vr plugin namespace.

`js
var player = new Plyr('my-video-css-selector');

player.vr().camera;
player.vr().scene;
player.vr().renderer;
`

Options

$3

> Type: boolean, default: false

Force the cardboard button to display on all devices even if we don't think they support it.

$3

> Type: boolean, default: true on ios and andriod

Whether motion/gyro controls should be enabled.

$3

> Type string, default: 'auto'
Can be any of the following:

#### '180'
The video is half sphere and the user should not be able to look behind themselves

#### '180_LR'
Used for side-by-side 180 videos
The video is half sphere and the user should not be able to look behind themselves

#### '180_MONO'
Used for monoscopic 180 videos
The video is half sphere and the user should not be able to look behind themselves

#### '360', 'Sphere', or 'equirectangular'
The video is a sphere

#### 'Cube' or '360_CUBE'
The video is a cube

#### 'NONE'
This video is not a 360 video

#### 'AUTO'
Check player.mediainfo.projection to see if the current video is a 360 video.

#### '360_LR'
Used for side-by-side 360 videos

#### '360_TB'
Used for top-to-bottom 360 videos

#### 'EAC'
Used for Equi-Angular Cubemap videos

#### 'EAC_LR'
Used for side-by-side Equi-Angular Cubemap videos

$3

> type: number, default: 32

This alters the number of segments in the spherical mesh onto which equirectangular
videos are projected. The default is 32 but in some circumstances you may notice
artifacts and need to increase this number.

$3

> type: string

This should be set on a source-by-source basis to turn 360 videos on an off depending upon the video.

See projection above for information of values. Note that AUTO is the same as NONE for player.mediainfo.projection.

$3

> type: boolean, default: false

Enable debug logging for this plugin

$3

> type: Omnitone library object

Use this property to pass the Omnitone library object to the plugin.
Please be aware of, the Omnitone library is not included in the build files.

$3

> type: object, default: {}

Default options for the Omnitone library. Please check available options on https://github.com/GoogleChrome/omnitone

$3

> type: boolean, default: false`

Feature to disable the togglePlay manually.
This functionality is useful in live events so that users cannot stop the live, but still have a controlBar available.

Credits ##

This project is a conglomeration of a few amazing open source libraries.

* VideoJS
* Three.js
* webvr-polyfill
* Omnitone

Support ##

videojs-vr is sponsored by Brightcove, HapYak and StreamShark