Skip to content
An early (2014ish) foray into 360 video on the web.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
libs add vr.js files and docs Mar 27, 2014
src minor updates, expose changeProjection Apr 10, 2014
vids initial commit Mar 26, 2014
Gruntfile.js initial commit Mar 26, 2014
LICENSE-MIT update links and references in documentation Nov 18, 2016


Note: This project is now outdated.

You may be interested instead to check out this plugin if using video.js: videojs-panorama

For a minimal 360 player (without video.js) see this project: simple-360-player.

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.

View Demo

Getting Started

Download videojs (Note: The plugin requires uncompressed video.js unless you are using version > 4.1.0)

In your web page:

<link rel="stylesheet" href="video-js.css">
<video id="video"
       class="video-js vjs-default-skin"
<script src="video.js"></script>
<script src="dist/videojs.vr.min.js"></script>
videojs('video', {}, function() {
  var player = this;
  player.vr({projection: 'Sphere'}); // initialize the plugin, 'Plane' projection by default

Host on a HTTP Server that supports byte range requests if you want the seek bar to work (e.g. Apache).

Oculus Rift Support

This plugin uses the vr.js project for reading the Rift's sensor data (via a Chrome plugin). See vr.js for installation instructions.

To enable rift support, include the libs/vr/*.js files after the three.js script tag. If a user does not have the vr.js plugin installed, the plugin should work as normal.

<link rel="stylesheet" href="libs/video-js-4.1.0/video-js.css">
<script src="libs/video-js-4.1.0/"></script>
<script src="libs/three.min.js"></script>

<!-- vr stuff is optional, must be after THREE is defined -->
<script src="libs/vr/vr.js"></script>
<script src="libs/vr/OculusRiftControls.js"></script>
<script src="libs/vr/OculusRiftEffect.js"></script>


Check out example.html to see VR in action.


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

Release History

(Nothing yet)

You can’t perform that action at this time.