360-degree video AFrame play-pause

Question

I am trying to make a 360video have play and pause, unfortunately, I haven't figured out how to do this when the user clicks the a-image element but it happens every time he clicks the browser window. Here is my code:

<a-scene>
<a-assets>
<video id="video" loop crossorigin="anonymous" playsinline webkit-playsinline src="video/SphereVideo.mp4">
</video>
</a-assets>
<img id="play" alt="play" src="photos/play.png">
<img id="pause" alt="pause" src="photos/pause.png" >
<a-videosphere rotation="0 -90 0" src="#video"  position="0 0 -1.5" play-pause></a-videosphere>
</a-videosphere>
<a-camera>

<a-image id="videoControls" src="#play" position="0 0 -1.5" scale="0.2 0.2 1" ></a-image>
</a-camera>
</a-scene>

And

AFRAME.registerComponent('play-pause', {
    init: function () {
      var videoControls=document.querySelector('#videoControls');
      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; }
      if(videoControls.getAttribute('src')=='#play'){
      videoEl.play();
      videoControls.setAttribute('src','#pause');
      }
      else {
        videoEl.pause();
        videoControls.setAttribute('src','#play');  
      }
      
    }
  });

  

How can I correct the window thing and play pause been done only when the user clicks at the element a-image ? Thanks for your time!

Answer 1

If you want to catch click events on the images, you need a cursor, which, for example, will cast rays from the mouse position into the scene:

<a-scene cursor="rayOrigin: mouse">

with it, you can simply listen on the elements (being the a-planes or a-images) and react accordingly:

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent('play-pause', {
    init: function() {
      const torus = document.querySelector('a-torus'); // the animated torus
      const resumeImg = document.getElementById("resume")
      const pauseImg = document.getElementById("pause")
      resumeImg.addEventListener('click', () => torus.emit("resume")); // resume the animation
      pauseImg.addEventListener('click', () => torus.emit("pause")); // pause the animation
    }
  });
</script>
<a-scene play-pause cursor="rayOrigin: mouse" raycaster="objects: a-plane">
  <a-torus position="0 1.5 -3" scale="0.5 0.5 0.5" color="blue" 
           animation="property: rotation; to: 0 360 0; loop: true; dur: 1000; 
                      easing: linear; resumeEvents: resume; pauseEvents: pause"></a-torus>
  <a-plane id="resume" scale="0.5 0.5 0.5" position="-0.5 1 -2" color="green"></a-plane>
  <a-plane id="pause" scale="0.5 0.5 0.5" position="0.5 1 -2" color="yellow"></a-plane>
</a-scene>