Need help with videojs-vr?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

videojs
275 Stars 88 Forks MIT License 197 Commits 56 Opened issues

Description

A plugin to add 360 and VR video support to video.js.

Services available

!
?

Need anything else?

Contributors list

VR

https://videojs-vr.netlify.com

Build Status Greenkeeper badge Slack Status Netlify Status

NPM

A video.js 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

npm install --save videojs-vr

Browser Support

The most recent versions of: * Desktop * Chrome * Firefox * Safari * Mobile * Chrome on Andriod * Safari on iOS

Projection support

Currently we only support: * Projections * Spherical Videos, via the 360/equirectangular projection * 360 cube videos * Mappings * Monoscopic (single video pane) * Stereoscopic (dual video pane for both eyes) via the cardboard button

Usage

To include videojs-vr on your website or web application, use any of the following methods.

 Tag

This is the simplest case. Get the script in whatever way you prefer and include the plugin after you include [video.js][videojs], so that the

videojs
global is available.

Browserify/CommonJS

When using with Browserify, install videojs-vr via npm and

require
the plugin as you would any other module.
var videojs = require('video.js');

// 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('videojs-vr');

var player = videojs('my-video');

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

RequireJS/AMD

When using with RequireJS (or another AMD library), get the script in whatever way you prefer and

require
the plugin as you normally would:
require(['video.js', 'videojs-vr'], function(videojs) {
  var player = videojs('my-video');

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

Optional integration with videojs-errors

If the videojs-errors plugin is intialized before

videojs-vr
, then it will be used to display errors to users.

Setting a global projection

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

var player = videojs('my-video');

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

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

Passing a projection on a source by source basis

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 = videojs('my-video');

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.
var player = videojs('my-video');

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.
var player = videojs('my-video');

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

Options

forceCardboard

Type:

boolean
, default:
false

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

motionControls

Type:

boolean
, default:
true on ios and andriod

Whether motion/gyro controls should be enabled.

projection

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

'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

player.mediainfo.projection

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
.

debug

type:

boolean
, default:
false

Enable debug logging for this plugin

omnitone

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.

omnitoneOptions

type:

object
, default:
{}

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

Credits

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

Support

This work is sponsored by Brightcove, HapYak and StreamShark

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.