Skip to content

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

License

Notifications You must be signed in to change notification settings

MetaCDN/videojs-vr

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 VR/XR immersive capable video player. Project video onto different shapes depending on the underlying format. Optionally supports Meta Quest and other VR/XR capable HMDs.

Lead Maintainer: Brandon Casey @brandonocasey

Maintenance Status: Stable

Installation

npm i videojs-vr

Browser Support

The most recent versions of:

  • Desktop
    • Chrome (recommended for HMD support)
    • Firefox
    • Safari
  • Mobile
    • Chrome on Android
    • Safari on iOS
  • Headsets
    • Meta Quest Browser
    • Rift (via Chrome browser)
    • WebXR plug-in (Chrome/Firefox)

Caveats

  • HLS captions on safari will not be visible as they are located inside of the shadowRoot in the video element and we cannot get access to them.

Projection support

Currently we only support:

  • Projections
    • Spherical Videos, via the 180/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.

<script> 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.

<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-vr.min.js"></script>
<script>
  var player = videojs('my-video');

  player.vr();
</script>

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:

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

Meta Quest and other HMD support

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

Rift, Meta Quest (with Quest Link cable) and other compatible HMDs on desktop require a Chrome build of 79 or higher. We recommend the latest stable Chrome. Go to immersiveweb.dev for more info.

Meta Quest/Pro users running in standalone mode should use the Meta Quest browser to access the immersive modes. It is downloadable from the Meta Quest Store. We recommend using the latest available version.

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

'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_TB'

Used for top/bottom 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

sphereDetail

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.

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

disableTogglePlay

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.

Support

This work is sponsored by Brightcove, HapYak and StreamShark

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 91.3%
  • SCSS 6.7%
  • HTML 1.9%
  • Shell 0.1%