MindARを利用した動画配置

動画配置の最小テンプレート
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-image.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-image-aframe.prod.js"></script>
<script>        
const showPortfolio = (done) => {
      const portfolio = document.querySelector("#panel");
      const portfolio2 = document.querySelector("#panel2");
      const PreviewButton = document.querySelector("#preview-button");
      const PreviewButton2 = document.querySelector("#preview-button2");
      portfolio.setAttribute("visible", true);
      portfolio2.setAttribute("visible", true);
     let y = 0;

const id = setInterval(() => {
        y += 0.008;
        if (y >= 0.6) {
          clearInterval(id);
     
          PreviewButton.addEventListener('click', () => {
            PreviewButton.setAttribute("visible", false);
            const testVideo = document.createElement( "video" );
            const canplayWebm = testVideo.canPlayType( 'video/webm; codecs="vp8, vorbis"' );
            if (canplayWebm == "") {
              document.querySelector("#video-link").setAttribute("src", "#video-mp4");
              document.querySelector("#video-mp4").play();
            } else {
              document.querySelector("#video-link").setAttribute("src", "#video-webm");
              document.querySelector("#video-webm").play();
            }
          });
          
          
          PreviewButton2.addEventListener('click', () => {
            PreviewButton2.setAttribute("visible", false);
            const testVideo = document.createElement( "video" );
            const canplayWebm = testVideo.canPlayType( 'video/webm; codecs="vp8, vorbis"' );
            if (canplayWebm == "") {
              document.querySelector("#video-link2").setAttribute("src", "#video-mp41");
              document.querySelector("#video-mp41").play();
            } else {
              document.querySelector("#video-link2").setAttribute("src", "#video-webm1");
              document.querySelector("#video-webm1").play();
            }
          });
        }
        portfolio.setAttribute("position", "0 " + 0 + " -0.01");
      }, 10);
    }
//  Aframeでターゲット0を摘出 
AFRAME.registerComponent('mytarget', {
      init: function () {
        this.el.addEventListener('targetFound', event => {
              showPortfolio(() => {
              });
           });
        this.el.addEventListener('targetLost', event => {
        });
      }
    });
</script>

<link rel="stylesheet" href="https://jirochanf.github.io/card/assets/webar.css">
</head>

<body>	
<div class="example-container">
<div id="example-scanning-overlay" class="hidden">
<div class="inner">
<img src="https://jirochanf.github.io/card/assets/overlay_mind3.jpg"/>  <!-- オーバーレイ画像定義 -->
<div class="scanline"></div>
</div>
</div>

<a-scene mindar-image="imageTargetSrc: https://jirochanf.github.io/card/assets/targets3.mind; showStats: false; uiScanning: #example-scanning-overlay;" embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">

<a-assets>
  <img id="preview" src="https://jirochanf.github.io/card/assets/mind3_prev01.jpg" />
  <img id="preview2" src="https://jirochanf.github.io/card/assets/preview2.png" />

  <video id="video-mp4" autoplay="false" loop="false" src="https://jirochanf.github.io/card/assets/video31.mp4"></video>
  <video id="video-webm" autoplay="false" loop="false" src="https://jirochanf.github.io/card/assets/video31.webm"></video>
  <video id="video-mp41" autoplay="false" loop="false" src="https://jirochanf.github.io/card/assets/video3.mp4"></video>
  <video id="video-webm1" autoplay="false" loop="false" src="https://jirochanf.github.io/card/assets/video3.webm"></video>
</a-assets>	
<a-camera position="0 0 0" look-controls="enabled: false" cursor="fuse: false; rayOrigin: mouse;" 
          raycaster="far: 10000; objects: .clickable">
</a-camera>
<!-- target0 確認後-->
<a-entity id="mytarget" mytarget mindar-image-target="targetIndex: 0">
<!--  panel1 表示  -->  
<a-entity visible="false" id="panel" position="0 0 0">
<!--  動画表示  -->
<a-entity id="panel-item0">
<a-video id="video-link" webkit-playsinline playsinline width="1" height="0.552" position="0 0 0"></a-video>
<a-image id="preview-button" class="clickable" src="#preview" alpha-test="0.5" position="0 0 0" height="0.552" width="1">
</a-image>
</a-entity> 
</a-entity>
<!--  panel2 表示  -->  
<a-entity visible="false" id="panel2" position="0.3 0.3 0" rotation="10 0 0">
<!--  動画表示  -->
<a-entity id="panel2-item0">
<a-video id="video-link2" webkit-playsinline playsinline width="0.8" height="0.45" position="0.3 0.3 0"></a-video>
<a-image id="preview-button2" class="clickable" src="#preview2" alpha-test="0.5" 
         position="0.3 0.3 0" height="0.45" width="0.8">
</a-image>
</a-entity>  
</a-entity>  
</a-entity>   
</a-scene>
</div>	
</body>
</html>