Как запустить несколько видео с помощью ar.js

ЗАКЛЮЧИТЕЛЬНОЕ ОБНОВЛЕНИЕ 13.09.2019, 23:50: этот код работает с несколькими настраиваемыми маркерами, однако маркеры не могут быть слишком похожими. Все мои предыдущие пользовательские маркеры были звездочками с небольшими различиями, и я думаю, что это как-то сбивает с толку. Но с новыми, более уникальными маркерами это работает.

Но почему-то это не повлияло на результат при использовании метода «отдельных компонентов».

Обновлено: 13.09.2019: Приведенный ниже код работает с предустановленными маркерами хиро и кандзи и одним настраиваемым маркером. Однако, когда я добавляю несколько пользовательских маркеров, видео останавливается на дополнительных маркерах. Я хочу, чтобы каждый маркер запускал уникальные видео (некоторые видео будут повторно использованы в нескольких маркерах). В моем текущем коде они все запускают оба видео. * Как я могу заставить этот код работать с несколькими пользовательскими маркерами?

<!-- A-FRAME -->
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script 
src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe- 
ar.js"></script> 
<script src="https://cdn.rawgit.com/donmccurdy/aframe- 
extras/v4.1.2/dist/aframe-extras.min.js"></script> 
<script src="https://rawgit.com/mayognaise/aframe-gif- 
shader/master/dist/aframe-gif-shader.min.js"></script> 

<!-- jQuery library -->
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script> 

<!-- Latest compiled and minified CSS -->
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
</script> 

<!-- vidhandler component -->
<script>
AFRAME.registerComponent('vidhandler', {
schema: {
  target: {type: 'string'}
},
init: function() {
    this.videoNodes = document.querySelectorAll(this.data.target)
},
tick: function() {
    if (this.el.object3D.visible == true) {
        if (!this.toggle) {
            this.toggle = true;
            for (let i = 0; i < this.videoNodes.length; i++) {
                this.videoNodes[i].play();
            } 
        }
    } else {
        if (this.toggle) {
          for (let i = 0; i < this.videoNodes.length; i++) {
            this.videoNodes[i].pause();
          }
          this.toggle = false;
        }
    }
}
});
</script>

<!-- assets for vidhandler -->
<a-assets >
    <video crossOrigin="Anonymous" Id="vid" 
loop="true"src="assets\textures\alpha.webm">
    </video>
    <video crossOrigin="Anonymous" Id="videonew" loop="true" src="assets\textures\VideoNew.mp4">
    </video>     
</a-assets>

 <!-- marker1: hollywood star 1 -->
 <a-marker  vidhandler="target: #vid, #videonew" type='pattern' url='https://raw.githubusercontent.com/merowell/custom-markers-with-video/master/aframe/examples/assets/hollywood-stars/patt/pattern-hollywood-star1.patt'>
    <!-- add transparent video (.webm) -->
    <a-plane  position='0 .3 0' width='3' height='2' rotation="-90 0 0" material='transparent:true;alphaTest:0;src:#vid'></a-plane>

    <!-- add non transparent video (.mp4) -->
    <a-plane  position='0 .2 0' width='1.5' height='1.5' rotation="-90 0 0" material='src:#videonew'></a-plane>
</a-marker>


<!-- marker2: hollywood star 2 -->
<a-marker  vidhandler="target: #vid, #videonew" type='pattern' url='https://raw.githubusercontent.com/merowell/custom-markers-with-video/master/aframe/examples/assets/hollywood-stars/patt/pattern-hollywood-star2.patt'>
     <!-- add transparent video (.webm) -->
    <a-plane  position='0 .3 0' width='3' height='2' rotation="-90 0 0" material='transparent:true;alphaTest:0;src:#vid'></a-plane>

    <!-- add non transparent video (.mp4) -->
    <a-plane  position='0 .2 0' width='1.5' height='1.5' rotation="-90 0 0" material='src:#videonew'></a-plane>
</a-marker>

Обновлено 9-12-19: как воспроизводить отдельные видео с отдельными маркерами, с возможностью повторного использования определенных видео? С помощью следующего кода видео отображаются как статическое изображение:

<!-- vidhandler component -->
<script>
AFRAME.registerComponent('vidHandler', {
// define a variable in which we will keep the video element
schema: {
 targets: {type: "string"}
},
 init: function() {
    this.toggle = false;
    this.vidNodes = document.querySelectorAll(this.data.targets);
    for (let i = 0; i < this.vidNodes.length; i++) {
          this.vidNodes[i].pause();
    }
},
tick: function() {
    if (this.el.object3D.visible == true) {
        if (!this.toggle) {
            this.toggle = true;
            for (let i = 0; i < this.vidNodes.length; i++) {
              this.vidNodes[i].play();
            }
        }
    } else {
        this.toggle = false;
        for (let i = 0; i < this.vidNodes.length; i++) {
          this.vidNodes[i].pause();
        }
    }
}
});
</script>

Исходный вопрос:

Пожалуйста, простите меня, я новичок в этом ...

Я использую ar.js с aframe для создания опыта webAR. Я использую два разных маркера для запуска двух разных видео.

Как сделать так, чтобы компонент Aframe.register запускал оба моих видео по отдельности? Два видео указаны как активы со следующими идентификаторами: #vid #videonew

ожидаемые результаты заключаются в том, что два маркера отображают уникальное видео, которое зацикливается независимо от того, отображаются ли оба маркера на веб-камеру или это только один из маркеров. Но на самом деле видео воспроизводятся только в том случае, если на веб-камеру отображаются оба маркера. В противном случае по отдельности видео отображаются как статическое изображение.

<!-- Video Player -->
<script>
AFRAME.registerComponent('vidhandler', {
init: function() {
    this.toggle = false;
    this.vidNodes = document.querySelectorAll("#vid, #videonew");
    for (let i = 0; i < this.vidNodes.length; i++) {
          this.vidNodes[i].pause();
    }
},
tick: function() {
    if (this.el.object3D.visible == true) {
        if (!this.toggle) {
            this.toggle = true;
            for (let i = 0; i < this.vidNodes.length; i++) {
              this.vidNodes[i].play();
            }
        }
    } else {
        this.toggle = false;
        for (let i = 0; i < this.vidNodes.length; i++) {
          this.vidNodes[i].pause();
        }
    }
}
});
</script>

<a-assets >
    <video crossOrigin="Anonymous" preload="auto"  Id="vid" loop="true"   webkit-playsinline playsinline controls>
       <source  type="video/webm"  src="assets\textures\alpha.webm">
       <h3>Error : Your browser does not support.</h3>
      <!-- FOR NOTMAL VIDEO YOU CAN USE MP4 or WEBM BUT FOR ALPHA VIDEO YOU NEED TO USE .WEBM FORMAT-->
    </video>

     <video crossOrigin="Anonymous" preload="auto"  Id="videonew" loop="true"   webkit-playsinline playsinline controls>
       <source  type="video/webm"  src="assets\textures\VideoNew.mp4">
       <h3>Error : Your browser does not support.</h3>
      <!-- FOR NOTMAL VIDEO YOU CAN USE MP4 or WEBM BUT FOR ALPHA VIDEO YOU NEED TO USE .WEBM FORMAT-->
    </video>
</a-assets>