JSFiddle - React, Tailwind, and code Playground

HTML

<!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...

JavaScript

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();
         }
         }
         });