Play audio from video after rubbing the marker. MindAR A-frame

[ZhilinAR]

Music from the video plays even after the marker is lost. Below is my code, I've been stuck with this problem for a very long time. I need the video and sound from it to pause when the marker is lost and start from the same moment when the camera finds the marker.

<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.3/dist/mindar-image-aframe.prod.js"></script>

<script>
  AFRAME.registerComponent("play-on-click", {
    init: function () {
      this.onClick = this.onClick.bind(this);
    },
    play: function () {
      window.addEventListener("click", this.onClick);
    },
    pause: function () {
      window.removeEventListener("click", this.onClick);
    },
    onClick: function (evt) {
      var videoEl = this.el.getAttribute("material").src;
      if (!videoEl) {
        return;
      }
      this.el.object3D.visible = true;
      videoEl.play();
    },
  });
  AFRAME.registerComponent("hide-on-play", {
    schema: { type: "selector" },
    init: function () {
      this.onPlaying = this.onPlaying.bind(this);
      this.onPause = this.onPause.bind(this);
      this.el.object3D.visible = !this.data.playing;
    },
    play: function () {
      if (this.data) {
        this.data.addEventListener("playing", this.onPlaying);
        this.data.addEventListener("pause", this.onPause);
      }
    },
    pause: function () {
      if (this.data) {
        this.data.removeEventListener("playing", this.onPlaying);
        this.data.removeEventListener("pause", this.onPause);
      }
    },
    onPlaying: function (evt) {
      this.el.object3D.visible = false;
    },
    onPause: function (evt) {
      this.el.object3D.visible = true;
    },
  });
</script>

  <a-entity
    mindar-image-target="targetIndex: 0"
    material="shader: flat; src: #video"
    geometry="primitive: plane; width: 1; height: 0.497"
    position="0 0 0"
    rotation="0 0 0"
    play-on-click
    hide-on-play="#video"
  >
  </a-entity>

  <a-camera position="0 0 0" look-controls="enabled: false">
    <a-entity
      position="0 0 0"
      text="align: center;
            width: 4;
            wrapCount: 100;
            color: black;
            value: Tap to allow videos to play"
      hide-on-play="#video"
    >
    </a-entity>
  </a-camera>
</a-scene>