videojs · kevleyski · Dec 2, 2022 · Dec 2, 2022 · Dec 5, 2022 · Dec 5, 2022
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+node_modules/.bin/lint-staged
diff --git a/.run/webxr start.run.xml b/.run/webxr start.run.xml
@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="webxr start" type="js.build_tools.npm">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="start" />
+    </scripts>
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+<a name="1.10.2"></a>
+## [1.10.2](https://github.com/videojs/videojs-vr/compare/v1.10.0...v1.10.1) (2024-05-28)
+
+### Chores
+
+* adding WebXR layers
+
 <a name="1.10.1"></a>
 ## [1.10.1](https://github.com/videojs/videojs-vr/compare/v1.10.0...v1.10.1) (2022-08-16)
 

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-mono.html b/examples/180-mono.html
@@ -3,26 +3,46 @@
 <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">
+  <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_lefteyeonly.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_MONO';
+<video width="640" height="300" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
+  <source src="../samples/video_180_lefteyeonly.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_MONO';
 
-      var vr = window.vr = player.vr({projection: '180_MONO', debug: true, forceCardboard: false});
-    }(window, window.videojs));
-  </script>
+    var vr = window.vr = player.vr({projection: '180_MONO', debug: true, forceCardboard: false});
+
+    const videoSourceParam = window.location.search.substring(1);
+    if (videoSourceParam && videoSourceParam.startsWith("http")) {
+      if (videoSourceParam.indexOf(".mpd") !== -1) {
+        player.src({
+          type: 'application/dash+xml',
+          src: videoSourceParam
+        });
+      } else if (videoSourceParam.indexOf(".m3u8") !== -1) {
+        player.src({
+          type: 'application/vnd.apple.mpegurl',
+          src: videoSourceParam
+        });
+      } else {
+        player.src({
+          type: 'video/mp4',
+          src: videoSourceParam
+        });
+      }
+    }
+  }(window, window.videojs));
+</script>
 </body>
 </html>
diff --git a/examples/180-tb.html b/examples/180-tb.html
@@ -0,0 +1,48 @@
+<!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});
+
+    const videoSourceParam = window.location.search.substring(1);
+    if (videoSourceParam && videoSourceParam.startsWith("http")) {
+      if (videoSourceParam.indexOf(".mpd") !== -1) {
+        player.src({
+          type: 'application/dash+xml',
+          src: videoSourceParam
+        });
+      } else if (videoSourceParam.indexOf(".m3u8") !== -1) {
+        player.src({
+          type: 'application/vnd.apple.mpegurl',
+          src: videoSourceParam
+        });
+      } else {
+        player.src({
+          type: 'video/mp4',
+          src: videoSourceParam
+        });
+      }
+    }
+  }(window, window.videojs));
+</script>
+</body>
+</html>
diff --git a/examples/180.html b/examples/180.html
@@ -3,26 +3,46 @@
 <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">
+  <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.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';
+<video width="640" height="300" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
+  <source src="../samples/video_180.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';
 
-      var vr = window.vr = player.vr({projection: '180', debug: true, forceCardboard: false});
-    }(window, window.videojs));
-  </script>
+    var vr = window.vr = player.vr({projection: '180', debug: true, forceCardboard: false});
+
+    const videoSourceParam = window.location.search.substring(1);
+    if (videoSourceParam && videoSourceParam.startsWith("http")) {
+      if (videoSourceParam.indexOf(".mpd") !== -1) {
+        player.src({
+          type: 'application/dash+xml',
+          src: videoSourceParam
+        });
+      } else if (videoSourceParam.indexOf(".m3u8") !== -1) {
+        player.src({
+          type: 'application/vnd.apple.mpegurl',
+          src: videoSourceParam
+        });
+      } else {
+        player.src({
+          type: 'video/mp4',
+          src: videoSourceParam
+        });
+      }
+    }
+  }(window, window.videojs));
+</script>
 </body>
 </html>
diff --git a/examples/360-cube.html b/examples/360-cube.html
@@ -3,27 +3,47 @@
 <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">
+  <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/doisethup_cubemap.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_CUBE';
+<video width="640" height="300" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
+  <source src="../samples/doisethup_cubemap.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_CUBE';
 
-      // AUTO is the default and looks at mediainfo
-      var vr = window.vr = player.vr({projection: 'AUTO', debug: true, forceCardboard: false});
-    }(window, window.videojs));
-  </script>
+    // AUTO is the default and looks at mediainfo
+    var vr = window.vr = player.vr({projection: 'AUTO', debug: true, forceCardboard: false});
+
+    const videoSourceParam = window.location.search.substring(1);
+    if (videoSourceParam && videoSourceParam.startsWith("http")) {
+      if (videoSourceParam.indexOf(".mpd") !== -1) {
+        player.src({
+          type: 'application/dash+xml',
+          src: videoSourceParam
+        });
+      } else if (videoSourceParam.indexOf(".m3u8") !== -1) {
+        player.src({
+          type: 'application/vnd.apple.mpegurl',
+          src: videoSourceParam
+        });
+      } else {
+        player.src({
+          type: 'video/mp4',
+          src: videoSourceParam
+        });
+      }
+    }
+  }(window, window.videojs));
+</script>
 </body>
 </html>