|
14 | 14 | - [Oculus Rift and HTC Vive Support](#oculus-rift-and-htc-vive-support)
|
15 | 15 | - [Accessing the Camera Position](#accessing-the-camera-position)
|
16 | 16 | - [Accessing THREE.js objects](#accessing-threejs-objects)
|
| 17 | + - [Options](#options) |
| 18 | + - [`forceCardboard`](#forcecardboard) |
| 19 | + - [`projection`](#projection) |
| 20 | + - [`'360'` or `'Sphere'`](#360-or-sphere) |
| 21 | + - [`'Cube'`, `'360_CUBE'`, or `'equirectangular'`](#cube-360_cube-or-equirectangular) |
| 22 | + - [`'NONE'`](#none) |
| 23 | + - [`'AUTO'`](#auto) |
| 24 | + - [`'360_LR'`](#360_lr) |
| 25 | + - [`'360_TB'`](#360_tb) |
| 26 | + - [`player.mediainfo.projection`](#playermediainfoprojection) |
| 27 | + - [`debug`](#debug) |
17 | 28 | - [Credits](#credits)
|
18 | 29 | - [Support](#support)
|
19 | 30 |
|
@@ -116,36 +127,72 @@ player.vr({projection: 'AUTO'});
|
116 | 127 | ## Oculus Rift and HTC Vive Support
|
117 | 128 | This plugin leverages the [webvr-boilerplate](https://github.com/borismus/webvr-boilerplate) project (which in turn uses [webvr-polyfill](https://github.com/borismus/webvr-polyfill) and [three.js](https://github.com/mrdoob/three.js)) to create a 'responsive VR' experience across multiple devices.
|
118 | 129 |
|
119 |
| -Oculus Rift and HTC Vive playback requires Firefox Nightly with the WebVR addon, or experimental WebVR-enabled builds of Chromium. Go to [WebVR.info](http://www.webvr.info) for more info. |
| 130 | +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](http://www.webvr.info) for more info. |
120 | 131 |
|
121 | 132 | GearVR playback requires the latest Samsung Internet for Gear VR with WebVR support enabled. Go [here](https://webvr.rocks/samsung_internet) for more info.
|
122 | 133 |
|
123 | 134 | ## Accessing the Camera Position
|
124 | 135 | The Three.js rotation values are exposed under the property `cameraVector` on the `vr` plugin namespace.
|
125 | 136 |
|
126 |
| -For example, assuming the parent element for Video.js is `#video-container` the following code would return the current `cameraVector` values: |
127 |
| - |
128 |
| - document.getElementById('video-container').player.vr.cameraVector |
| 137 | +```js |
| 138 | +var player = videojs('my-video'); |
129 | 139 |
|
130 |
| -See `example-camera.html` for a working demo that logs camera object and rotation to the console every second. |
| 140 | +player.vr().cameraVector; |
| 141 | +``` |
131 | 142 |
|
132 | 143 | ## Accessing THREE.js objects
|
133 | 144 | 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.
|
134 | 145 |
|
135 |
| -For example, assuming the parent element for Video.js is `#video-container` the following code would return the current `camera` object: |
| 146 | +``` |
| 147 | +var player = videojs('my-video'); |
| 148 | +
|
| 149 | +player.vr().camera; |
| 150 | +player.vr().scene; |
| 151 | +player.vr().rendeer; |
| 152 | +``` |
| 153 | + |
| 154 | +## Options |
| 155 | +### `forceCardboard` |
| 156 | +> Type: `boolean`, default: `false` |
| 157 | +
|
| 158 | +Force the cardboard button to display on all devices even if we don't think they support it. |
| 159 | + |
| 160 | +### `projection` |
| 161 | + |
| 162 | +> Type `string`, default: `'auto'` |
| 163 | +Can be any of the following: |
| 164 | + |
| 165 | +#### `'360'` or `'Sphere'` |
| 166 | +The video is a sphere |
| 167 | + |
| 168 | +#### `'Cube'`, `'360_CUBE'`, or `'equirectangular'` |
| 169 | +The video is a cube |
| 170 | + |
| 171 | +#### `'NONE'` |
| 172 | +This video is not a 360 video |
| 173 | + |
| 174 | +#### `'AUTO'` |
| 175 | +Check `player.mediainfo.projection` to see if the current video is a 360 video. |
| 176 | + |
| 177 | +#### `'360_LR'` |
| 178 | +Used for side-by-side 360 videos |
| 179 | + |
| 180 | +#### `'360_TB'` |
| 181 | +Used for top-to-bottom 360 videos |
136 | 182 |
|
137 |
| - document.getElementById('video-container').player.vr.threeJs.camera |
| 183 | +### `player.mediainfo.projection` |
138 | 184 |
|
139 |
| - while: |
| 185 | +> type: `string` |
140 | 186 |
|
141 |
| - document.getElementById('video-container').player.vr.threeJs.scene |
| 187 | +This should be set on a source-by-source basis to turn 360 videos on an off depending upon the video. |
142 | 188 |
|
143 |
| - would return the THREE.js Scene, and: |
| 189 | +See [`projection`](#projection) above for information of values. Note that `AUTO` is the same as `NONE` for `player.mediainfo.projection`. |
144 | 190 |
|
145 |
| - document.getElementById('video-container').player.vr.threeJs.renderer |
| 191 | +### `debug` |
146 | 192 |
|
147 |
| - would return the THREE.js renderer. |
| 193 | +> type: `boolean`, default: `false` |
148 | 194 |
|
| 195 | +Enable debug logging for this plugin |
149 | 196 |
|
150 | 197 | ## Credits ##
|
151 | 198 |
|
|
0 commit comments