Video Playback in Augmented Reality On Detecting M

I want to Play A video when the marker(HIRO) is detected using the webcam. When I remove it should be paused and when the marker is detected the video should play using A-Frame. I had written the code but it's not working. Can anyone help me? I tried all possible way but it's not working so, Can Anyone post the code or send an example.

When you see the marker - play the video. Once you lose the marker - pause the video

Eg : Video Augmentation

         AFRAME.registerComponent('vidhandler', {
         init: function () {
          this.toggle = false;
          document.querySelector("#vid").pause(); //reference to the video
         },
         tick:function(){  
         if(document.querySelector("a-marker").object3D.visible == true){
           if(!this.toggle){
             this.toggle = true;
             document.querySelector("#vid").play();
           }
         }else{
           this.toggle = false;
           document.querySelector("#vid").pause();
         }
         }
         });

<!DOCTYPE html>
<html>
   <head>
      <title>Video AR</title>
   </head>
   <meta name="apple-mobile-web-app-capable" content="yes">
   <!-- <script src="vendor/aframe/build/aframe.min.js"></script> -->
   <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
   <!-- <script src="vendor/aframe/build/aframe.js"></script> -->
   <!-- include for artoolkit trackingBackend -->
   <script src='aframe_lib/artoolkit.min.js'></script>
   <script src='aframe_lib/artoolkit.api.js'></script>
   <!-- include for aruco trackingBackend -->
   <script src='aframe_lib/svd.js'></script> 
   <script src='aframe_lib/posit1.js'></script> 
   <script src='aframe_lib/cv.js'></script> 
   <script src='aframe_lib/aruco.js'></script> 
   <script src='aframe_lib/threex-arucocontext.js'></script> 
   <script src='aframe_lib/threex-arucodebug.js'></script>
   <!-- include for tango trackingBackend -->
   <script src='aframe_lib/THREE.WebAR.js'></script>
   <!-- include ar.js -->
   <script src='aframe_lib/signals.min.js'></script>
   <script src='aframe_lib/threex-artoolkitprofile.js'></script>
   <script src='aframe_lib/threex-artoolkitsource.js'></script>
   <script src='aframe_lib/threex-artoolkitcontext.js'></script>
   <script src='aframe_lib/threex-arbasecontrols.js'></script>
   <script src='aframe_lib/threex-armarkercontrols.js'></script>
   <script src='aframe_lib/threex-arsmoothedcontrols.js'></script>
   <script src='aframe_lib/threex-hittesting-plane.js'></script>
   <script src='aframe_lib/threex-hittesting-tango.js'></script>
   <script src='aframe_lib/threex-armarkerhelper.js'></script>
   <script src='aframe_lib/arjs-utils.js'></script>
   <script src='aframe_lib/arjs-session.js'></script>
   <script src='aframe_lib/arjs-anchor.js'></script>
   <script src='aframe_lib/arjs-hittesting.js'></script>
   <script src='aframe_lib/arjs-tangovideomesh.js'></script>
   <script src='aframe_lib/arjs-tangopointcloud.js'></script>
   <script src='aframe_lib/arjs-debugui.js'></script>
   <script src='aframe_lib/threex-armultimarkerutils.js'></script>
   <script src='aframe_lib/threex-armultimarkercontrols.js'></script>
   <script src='aframe_lib/threex-armultimarkerlearning.js'></script>
   <!-- include aframe-ar.js -->
   <script src="aframe_lib/system-arjs.js"></script>
   <script src="aframe_lib/component-anchor.js"></script>
   <script src="aframe_lib/component-hit-testing.js"></script>
   <body>
      <a-scene embedded arjs='trackingMethod: best;'>

         <a-anchor hit-testing-enabled='true'>

            <a-assets>

               <video  type="video/mp4" id="vid"    loop="false" src="https://ucarecdn.com/bb90f1f8-134e-4eb2-9688-38721ee7e9ad/" webkit-playsinline >
               </video>

            </a-assets>

            <a-marker type="pattern" url="https://ucarecdn.com/80ba69d9-96f2-46e7-aa62-8168f2ac06a5/">

               <a-video vidhandler  position="0 0.2 0" src="#vid" rotation="90 180 0"></a-video>

            </a-marker>

         </a-anchor>

         <a-entity light="color: #ccccff; intensity: 1; type: ambient;" visible=""></a-entity>

      </a-scene>
      
   </body>

1) make sure you load the video properly in the assets - throw in the crossorigin: anonymous and make sure you can access the video.

<a-assets>
  <video id="vid" src="buckBunny.mp4" loop="true" crossorigin>
</a-assets>

2) set up the marker

<a-marker preset="hiro" vidhandler>
  <a-plane position='1 2 0' scale="2 2 2" width="2" rotation="-90 0 0" 
   material='transparent:true; opacity: 0.7; src:#vid'></a-plane>
</a-marker>

3) Make a component which will play the video, once / only when the marker is seen

AFRAME.registerComponent('vidhandler', {
  init: function () {
    this.toggle = false;
    this.vid = document.querySelector("#vid")
    this.vid.pause()
},
tick:function(){
   if(this.el.object3D.visible == true){
     if(!this.toggle){
       this.toggle = true;
       this.vid.play();
    }
  }else{
    this.toggle = false;
    this.vid.pause();
  }
 }
});

4) enjoy Big Buck bunny in your living room