fix: FrontSide -> BackSide for 360 videos due to changes in three.js (#…

…88)
videojs · May 23, 2018 · e58862d · e58862d
1 parent db749dc
commit e58862d
Show file tree

Hide file tree

Showing 7 changed files with 367 additions and 360 deletions.
diff --git a/examples/cube.html b/examples/cube.html
@@ -0,0 +1,29 @@
+<!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/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>
+</body>
+</html>
diff --git a/examples/fluid.html b/examples/fluid.html
@@ -11,7 +11,7 @@
     <source src="../samples/eagle-360.mp4" type="video/mp4">
   </video>
   <ul>
-    <li><a href="test/">Run unit tests in browser.</a></li>
+    <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>

diff --git a/examples/iframe.html b/examples/iframe.html
@@ -3,10 +3,11 @@
 <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>
   <iframe width="700" height="400" src="../index.html" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" allow="gyroscope; accelerometer; xr"></iframe>
+  <ul>
+    <li><a href="../">return to main example</a></li>
+  </ul>
 </body>
 </html>
diff --git a/index.html b/index.html
@@ -12,6 +12,9 @@
   </video>
   <ul>
     <li><a href="test/">Run unit tests in browser.</a></li>
+    <li><a href="examples/cube.html">Cube Video example</a></li>
+    <li><a href="examples/fluid.html">"Fluid" video size example</a></li>
+    <li><a href="examples/iframe.html">Iframe example</a></li>
   </ul>
   <script src="node_modules/video.js/dist/video.js"></script>
   <script src="dist/videojs-vr.js"></script>