用于触发视频播放的浏览器交互

问：

我正在开发一个 AFRAME、AR.js 浏览器页面来运行增强现实内容。 虽然，我面临着在浏览器中播放视频的限制问题。 某些浏览器需要交互来触发视频播放，例如单击事件侦听器，我不想在其上添加按钮。 我的 AR 页面有两个视频可以通过图像目标找到，我无法弄清楚如何在用户单击屏幕时使它们能够播放。我只用一个视频实现了它。

这是带有图像目标（标记）和与每个目标关联的视频的 AFRAME 代码。

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

这是我用来允许浏览器运行视频的事件侦听器交互，但无法弄清楚它如何在不重叠声音的情况下为两个视频权限工作。

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