search

MetaCDN / videojs-vr_OLD

A video.js plugin that turns a video element into a HTML5 Panoramic 360 video player.
MIT License
24 stars 16 forks source link

readme

VR

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.

View Demo

Build

npm install
npm run build

Download Local Samples

npm run local-samples

Run

npm run serve

Examples

To test locally, visit localhost:3000/example.html Hosted example

For an iframe example, visit localhost:3000/iframe.html Hosted example

To test macOS and iOS devices with Safari, you need a local/same domain source file. After running npm run local-samples, visit localhost:3000/example-local.html an MP4 sample Hosted example OR visit localhost:3000/example-local-hls.html for a HLS sample Hosted example

Setting up your own player

Include the following script imports:

<script src="https://github.com/MetaCDN/videojs-vr_OLD/raw/master/dist/player-skin.js"></script>
<script src="https://github.com/MetaCDN/videojs-vr_OLD/raw/master/dist/player.full.js"></script>

If you want to roll your own VideoJS instance and just want the plugin and supporting libraries (e.g. to use as a Brightcove plugin), import the below instead:

<script src="https://github.com/MetaCDN/videojs-vr_OLD/raw/master/dist/video-js.min.js</script>

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

Oculus Rift and HTC Vive Support

This plugin leverages the webvr-boilerplate project (which in turn uses webvr-polyfill and three.js) to create a 'responsive VR' experience across multiple devices.

Oculus Rift and HTC Vive playback requires Firefox 55+ 64-Bit (recommended), or experimental WebVR-enabled builds of Chromium. Go to WebVR.info for more info.

GearVR playback requires the Oculus Browser (recommended), or 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.

For example, assuming the parent element for Video.js is #video-container the following code would return the current cameraVector values:

document.getElementById('video-container').player.vr.cameraVector

See example-camera.html for a working demo that logs camera object and rotation to the console every second.

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.

For example, assuming the parent element for Video.js is #video-container the following code would return the current camera object:

document.getElementById('video-container').player.vr.threeJs.camera

while:

document.getElementById('video-container').player.vr.threeJs.scene

would return the THREE.js Scene, and:

document.getElementById('video-container').player.vr.threeJs.renderer

would return the THREE.js renderer.

Credits

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

Support

This work is sponsored by Brightcove, HapYak and StreamShark

Release History