I want to load(play) the video only when the Marker(HIRO Pattern) is hovered in-front of my webcam : I am using A-Frame. I am trying to augment a Video(mp4) when the pattern or marker(HIRO) is hovered in front of my webcam, the video should be loaded or played on the marker. Now  The issue with this code is when the page gets loaded the video gets played automatically without any marker or pattern(HIRO). The video is displayed on the marker.
                 I just want to load the video whenever the pattern or marker is shown. Without patter, it should not load. Please help me with this
[Video Augmentation on Marker][1]

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <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>
    <!-- start the body of your page -->

    <body style='margin : 0px; overflow: hidden;'>
      <a-scene embedded arjs='trackingMethod: best;'>
        <a-anchor hit-testing-enabled='true'>
          <a-entity>
            <video type="video/mp4" id="penguin-sledding" autoplay="true" loop="false" src="resources/video.mp4" webkit-playsinline>
             </a-entity>
             <a-video  position="0 0.2 0" src="#penguin-sledding" rotation="90 180 0"></a-video>
          </a-anchor>
          <a-camera-static preset='hiro'/>
          <a-entity light="color: #ccccff; intensity: 1; type: ambient;" visible="">
          </a-entity>
       </a-scene>
    </body>

<!-- end snippet -->

strong text


  [1]: https://i.stack.imgur.com/Nlefh.jpg