A plugin to add 360 and VR video support to video.js.
https://videojs-vr.netlify.com
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
npm install --save videojs-vr
The most recent versions of: * Desktop * Chrome * Firefox * Safari * Mobile * Chrome on Andriod * Safari on iOS
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
To include videojs-vr on your website or web application, use any of the following methods.
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
videojsglobal is available.
When using with Browserify, install videojs-vr via npm and
requirethe 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'});
When using with RequireJS (or another AMD library), get the script in whatever way you prefer and
requirethe plugin as you normally would:
require(['video.js', 'videojs-vr'], function(videojs) { var player = videojs('my-video');player.vr({projection: '360'}); });
If the videojs-errors plugin is intialized before
videojs-vr, then it will be used to display errors to users.
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
Set
player.mediainfoand
player.mediainfo.projectionto a valid projection value and pass in 'AUTO' or nothing for the
projectionkey 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 ```
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.
The Three.js rotation values are exposed under the property
cameraVectoron the
vrplugin namespace.
var player = videojs('my-video');player.vr().cameraVector;
The Three.js Scene, renderer, and perspective camera are exposed under the
threeJsobject as the properties
scene,
renderer, and
cameraon the
vrplugin namespace.
var player = videojs('my-video');player.vr().camera; player.vr().scene; player.vr().renderer;
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.projectionto 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.
projectionabove for information of values. Note that
AUTOis the same as
NONEfor
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
This project is a conglomeration of a few amazing open source libraries.
This work is sponsored by Brightcove, HapYak and StreamShark