Browser interaction to trigger video playback

Question

I'm developing a AFRAME, AR.js browser page to run an Augmentated Reality content. Although, I'm facing problems with restrictions on playing videos in the browser. Some browsers are requiring interaction to trigger video playback like a click event listener, and I wouldn't like to add a button on it. My AR page has two videos to be found through image targets, and I cannot figure it out how to turn them able to play when the user click on the screen. I've only achieved it with a single video.

This is the AFRAME code with image targets (markers) and the videos associated with each.

AFRAME.registerComponent("videohandler", {
        init: function () {
          var marker1 = document.querySelector("#marker_1");
          var marker2 = document.querySelector("#marker_2");
          this.vid1 = document.querySelector("#vid_1");
          this.vid2 = document.querySelector("#vid_2");

          marker1.addEventListener(
            "markerFound",
            function () {
              this.toggle = true;
              this.vid1.play();
            }.bind(this)
          );

          marker2.addEventListener(
            "markerFound",
            function () {
              this.toggle = true;
              this.vid2.play();
            }.bind(this)
          );

          marker1.addEventListener(
            "markerLost",
            function () {
              this.toggle = false;
              this.vid1.pause();
            }.bind(this)
          );

          marker2.addEventListener(
            "markerLost",
            function () {
              this.toggle = false;
              this.vid2.pause();
            }.bind(this)
          );
        },
      });

And this is the event listener interaction I've used to allow the browser to run videos, but cannot figure out how it would work for both videos permission without overlapping their sounds.

window.addEventListener(
        "click",
        function () {
          document.querySelector("#vid_1").play();
        },
        { once: true }
      );