Update index.html

itaushiro · Mar 31, 2024 · 23af2c1 · 23af2c1
1 parent 4d58977
commit 23af2c1
Showing 1 changed file with 23 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -67,21 +67,24 @@
   <div class="arjs-loader">
     <div>Loading, please wait...</div>
   </div>
-
+  <!-- 確認用 -->
+  <!-- <video src="./img/2-6.mp4" preload="auto" id="vid" response-type="arraybuffer" crossorigin="anonymous" loop
+    crossorigin webkit-playsinline muted playsinline style="position: absolute; z-index: 1000000; top: 50%; left: 50%;">
+  </video> -->
   <a-scene vr-mode-ui="enabled: false;" renderer='antialias: true; alpha: true; precision: medium;' embedded
     arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;">
 
     <a-assets>
-      <video src="./img/2-6.mp4" preload="auto" id="vid" response-type="arraybuffer" crossorigin="anonymous" loop
-         webkit-playsinline autoplay muted playsinline>
+      <video src="./img/2-6.mp4" preload="auto" id="" response-type="arraybuffer" crossorigin="anonymous" loop
+        crossorigin webkit-playsinline muted playsinline>
       </video>
     </a-assets>
 
     <!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
-    <a-nft videohandler type="nft" url="https://raw.githack.com/itaushiro/2403_ar_js_video/main/trex/trex" smooth="true" smoothCount="10" smoothTolerance="0.01"
-      smoothThreshold="5" size="4">
+    <a-nft videohandler type="nft" url="https://raw.githack.com/itaushiro/2403_ar_js_video/main/trex/trex" smooth="true"
+      smoothCount="10" smoothTolerance="0.01" smoothThreshold="5" size="4">
 
-      <a-video id="a-video" src="#vid" position='120 0 -240' rotation='90 180 0' width='320' height='176'></a-video>
+      <a-video id="a-video" src="#vid" position='120 0 -240' rotation='270 180 180' width='320' height='176'></a-video>
 
     </a-nft>
 
@@ -90,22 +93,20 @@
   </a-scene>
 </body>
 <script>
-  window.onload = function () {
-    AFRAME.registerComponent('videohandler', {
-      init: function () {
-        var marker = this.el;
-
-        marker.addEventListener('markerFound', function () {
-          document.getElementById('vid').play();
-        }.bind(this));
-
-        marker.addEventListener('markerLost', function () {
-          document.getElementById('vid').pause();
-          // document.getElementById('vid').currentTime = 0;
-        }.bind(this));
-      }
-    });
-  };
+  AFRAME.registerComponent('videohandler', {
+    init: function () {
+      var marker = this.el;
+
+      marker.addEventListener('markerFound', function () {
+        document.getElementById('vid').play();
+      }.bind(this));
+
+      marker.addEventListener('markerLost', function () {
+        document.getElementById('vid').pause();
+        // document.getElementById('vid').currentTime = 0;
+      }.bind(this));
+    }
+  });
 </script>
 
 </html>