• Stars
    star
    499
  • Rank 84,284 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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 i videojs-vr

Browser Support

The most recent versions of:

  • Desktop
    • Chrome
    • Firefox
    • Safari
  • Mobile
    • Chrome on Android
    • Safari on iOS

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

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

'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

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

More Repositories

1

video.js

Video.js - open source HTML5 video player
JavaScript
36,726
star
2

videojs-contrib-hls

HLS library for video.js
JavaScript
2,827
star
3

http-streaming

HLS, DASH, and future HTTP streaming protocols library for video.js
JavaScript
2,359
star
4

videojs-youtube

YouTube playback technology for Video.js
JavaScript
1,093
star
5

mux.js

Lightweight utilities for inspecting and manipulating video container formats.
JavaScript
1,036
star
6

m3u8-parser

An m3u8 parser.
JavaScript
429
star
7

videojs-contrib-ads

A Tool for Building Video.js Ad Plugins
JavaScript
375
star
8

videojs-playlist

Playlist plugin for videojs
JavaScript
347
star
9

video-js-swf

Custom Flash Player for VideoJS
JavaScript
337
star
10

videojs-contrib-dash

Video.js plugin for supporting the MPEG-DASH playback through a video.js player
JavaScript
295
star
11

videojs-overlay

A video.js plugin to display simple overlays during playback.
JavaScript
236
star
12

videojs-flash

The Flash tech for video.js
JavaScript
213
star
13

videojs-vimeo

Support Vimeo source for Video.js
JavaScript
193
star
14

videojs-contrib-eme

Supports Encrypted Media Extensions for playback of encrypted content in Video.js
JavaScript
186
star
15

hls-fetcher

JavaScript
163
star
16

videojs-contrib-quality-levels

JavaScript
147
star
17

videojs-contrib-media-sources

Code for working with the media source extensions API and video.js
JavaScript
144
star
18

themes

Videojs themes 💅
CSS
127
star
19

videojs-playlist-ui

A playlist video picker for video.js
JavaScript
124
star
20

thumbcoil

Tools for inspecting MPEG2TS, fMP4, and FLV files and the codec bitstreams therein
JavaScript
121
star
21

videojs-errors

A video.js plugin that displays error messages to video viewers.
JavaScript
85
star
22

generator-videojs-plugin

Yeoman generator for video.js plugins.
JavaScript
80
star
23

mpd-parser

JavaScript
74
star
24

vtt.js

A JavaScript implementation of the WebVTT specification, forked from vtt.js for use with Video.js
JavaScript
64
star
25

font

Icon font used for Video.js
CSS
58
star
26

videojs.com

The Video.js Website
MDX
57
star
27

designer

A video.js player skin editor using a live CSS editor
JavaScript
41
star
28

aes-decrypter

JavaScript
31
star
29

videojs-contextmenu-ui

A cross-device context menu UI for video.js players.
JavaScript
28
star
30

videojs-playbackrate-adjuster

A Video.js middleware that adjusts controls based on playback rate
JavaScript
26
star
31

cdn

The video.js CDN
JavaScript
24
star
32

ie8

Video.js files for IE8 compatibility
JavaScript
23
star
33

video.js-component

Video.js - HTML5 Video Player - Component
JavaScript
15
star
34

docs

videojs docs
JavaScript
14
star
35

plugin-concat

Concatenate videos for playback by videojs/http-streaming in a Video.js player
JavaScript
10
star
36

videojs-adaptive

Building support for adaptive streaming video formats into video.js
JavaScript
10
star
37

doc-generator

Auto-generate API docs for the video.js codebase and plugins
JavaScript
8
star
38

videojs-settings-menu

A place to incubate a new settings menu for videojs.
JavaScript
8
star
39

videojs-media-session

Media Session API plugin
JavaScript
8
star
40

videojs-4to5

Tools to ease the transition from video.js 4.x to 5.x.
JavaScript
7
star
41

thumb.co.il

The fancy front-end for Thumbcoil!
JavaScript
7
star
42

standard

JavaScript Standard Style — One Style to Rule Them All
JavaScript
6
star
43

vhs-utils

Objects and functions shared throughout @videojs/http-streaming code
JavaScript
6
star
44

remark-preset-lint-videojs

A remark linting preset for Video.js
JavaScript
5
star
45

videojs-placeholder

A placeholder for videojs packages
5
star
46

blog

The video.js blog
Stylus
4
star
47

grunt-videojs-languages

A grunt task to convert video.js language JSON files in to includable scripts.
JavaScript
4
star
48

web-media-box

TypeScript
4
star
49

videojs-generate-rollup-config

Generate a standard rollup config, so that plugins don't need the same script in every repository.
JavaScript
3
star
50

eslint-config-videojs

JavaScript
3
star
51

videojs-languages

JavaScript
3
star
52

webwackify

launch a web worker that can require() in the browser with browserify and webpack
JavaScript
3
star
53

autoplay-tests

Autoplay test examples
HTML
2
star
54

tooling

A monorepo for all videojs project and plugin tooling
JavaScript
2
star
55

spellbook

JavaScript
2
star
56

ffrwd

ffrwd is an extensible HTML5 streaming media player capable of playing HLS, MPEG-DASH and more!
1
star
57

generator-helpers

A package to keep all of our generator helpers packages, so everything can be updated more easily.
1
star
58

.github

1
star
59

xhr

A small xhr wrapper
JavaScript
1
star
60

babel-config

A standard babel config, so that plugins don't need the same script in every repository.
JavaScript
1
star
61

rfcs

RFCs for changes to Video.js
1
star
62

videojs-bundler-sample

sample and test project for using Video.js with various bundler configurations
JavaScript
1
star