videojs · mister-ben · Dec 2, 2022 · Dec 2, 2022 · Dec 5, 2022 · Dec 5, 2022
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -21,7 +21,6 @@ When you've made your changes, push your commit(s) to your fork and issue a pull
 Testing is a crucial part of any software project. For all but the most trivial changes (typos, etc) test cases are expected. Tests are run in actual browsers using [Karma][karma].
 
 - In all available and supported browsers: `npm test`
-- In a specific browser: `npm run test:chrome`, `npm run test:firefox`, etc.
 - While development server is running (`npm start`), navigate to [`http://localhost:9999/test/`][local]
 
 

diff --git a/README.md b/README.md
@@ -38,6 +38,7 @@ Maintenance Status: Stable
   - [`projection`](#projection)
     - [`'180'`](#180)
     - [`'180_LR'`](#180_lr)
+    - [`'180_TB'`](#180_tb)
     - [`'180_MONO'`](#180_mono)
     - [`'360'`, `'Sphere'`, or `'equirectangular'`](#360-sphere-or-equirectangular)
     - [`'Cube'` or `'360_CUBE'`](#cube-or-360_cube)
@@ -73,7 +74,11 @@ The most recent versions of:
 * Mobile
   * Chrome on Android
   * Safari on iOS
-
+* Headsets
+  * Meta Quest Browser
+  * Rift (via Chrome browser)
+  * WebXR plug-in (Chrome/Firefox)
+
 ## 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.
 
@@ -218,6 +223,10 @@ The video is half sphere and the user should not be able to look behind themselv
 Used for side-by-side 180 videos
 The video is half sphere and the user should not be able to look behind themselves
 
+#### `'180_TB'`
+Used for top/bottom 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
@@ -294,7 +303,7 @@ This project is a conglomeration of a few amazing open source libraries.
 
 * [VideoJS](http://www.videojs.com)
 * [Three.js](http://threejs.org)
-* [webvr-polyfill](https://github.com/borismus/webvr-polyfill)
+* [webxr-polyfill](https://github.com/immersive-web/webxr-polyfill)
 * [Omnitone](https://googlechrome.github.io/omnitone)
 
 ## Support ##

diff --git a/examples/180-tb.html b/examples/180-tb.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>videojs-vr Demo</title>
+   <link href="../node_modules/video.js/dist/video-js.css" rel="stylesheet">
+   <link href="../dist/videojs-vr.css" rel="stylesheet">
+</head>
+<body>
+  <video width="640" height="300" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
+    <source src="../samples/video_180_TB.mp4" type="video/mp4">
+  </video>
+  <ul>
+    <li><a href="../">return to main example</a></li>
+  </ul>
+  <script src="../node_modules/video.js/dist/video.js"></script>
+  <script src="../dist/videojs-vr.js"></script>
+  <script>
+    (function(window, videojs) {
+      var player = window.player = videojs('videojs-vr-player');
+      player.mediainfo = player.mediainfo || {};
+      player.mediainfo.projection = '180_TB';
+
+      var vr = window.vr = player.vr({projection: '180_TB', debug: true, forceCardboard: false});
+    }(window, window.videojs));
+  </script>
+</body>
+</html>
diff --git a/examples/360-tb-2.html b/examples/360-tb-2.html
@@ -0,0 +1,30 @@
+
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>videojs-vr Demo</title>
+   <link href="../node_modules/video.js/dist/video-js.css" rel="stylesheet">
+   <link href="../dist/videojs-vr.css" rel="stylesheet">
+</head>
+<body>
+  <video width="640" height="300" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
+    <source src="../samples/cc_oceanside_beach.mp4" type="video/mp4">
+  </video>
+  <ul>
+    <li><a href="../">return to main example</a></li>
+  </ul>
+  <script src="../node_modules/video.js/dist/video.js"></script>
+  <script src="../dist/videojs-vr.js"></script>
+  <script>
+    (function(window, videojs) {
+      var player = window.player = videojs('videojs-vr-player');
+      player.mediainfo = player.mediainfo || {};
+      player.mediainfo.projection = '360';
+
+      // AUTO is the default and looks at mediainfo
+      var vr = window.vr = player.vr({projection: '360_TB', debug: true, forceCardboard: false});
+    }(window, window.videojs));
+  </script>
+</body>
+</html>
diff --git a/examples/img/controls_back10.png b/examples/img/controls_back10.png
diff --git a/examples/img/controls_button.xcf b/examples/img/controls_button.xcf
diff --git a/examples/img/controls_exitimmersive.png b/examples/img/controls_exitimmersive.png
diff --git a/examples/img/controls_forward10.png b/examples/img/controls_forward10.png
diff --git a/examples/img/controls_pause.png b/examples/img/controls_pause.png
diff --git a/examples/img/controls_play.png b/examples/img/controls_play.png
diff --git a/index.html b/index.html
@@ -8,12 +8,14 @@
   <iframe width="700" height="400" src="examples/360.html" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" allow="gyroscope; accelerometer; xr"></iframe>
   <ul>
     <li><a href="test/debug.html">Run unit tests in browser.</a></li>
-    <li><a href="examples/180.html">180 video example</a></li>
+    <li><a href="examples/180.html">180 video example (left/right)</a></li>
+    <li><a href="examples/180-tb.html">180 video example (top/bottom)</a></li>
     <li><a href="examples/180-mono.html">180 video example (monoscopic input)</a></li>
     <li><a href="examples/360-cube.html">360 Cube Video example</a></li>
     <li><a href="examples/360.html">360 Video example</a></li>
     <li><a href="examples/360-two.html">Another 360 Video example</a></li>
-    <li><a href="examples/360-tb.html">360 TB Video example</a></li>
+    <li><a href="examples/360-tb.html">360 TB (top/bottom) Video example</a></li>
+    <li><a href="examples/360-tb-2.html">Another 360 TB (top/bottom) Video example</a></li>
     <li><a href="examples/eac.html">EAC video example</a></li>
     <li><a href="examples/eac-lr.html">EAC LR video example</a></li>
     <li><a href="examples/fluid.html">"Fluid" video size example</a></li>