How to make script that plays and pauses multiple aframe a-video entities

Question

I want to make a script that can control my videos based on if I click them. I click them, they play, and if they are playing, I click and they pause.

The thing that is different in my example than in the other answers on stack overflow that I've used to run my code successfully below is that I want to have multiple videos, all controlled by separate clicking. I tried using a-video and class 'videos': document.querySelector('a-video') // document.querySelector('.videos') but it still won't play. Here's all of my code which runs GREAT when there's one video:

      <script>
      AFRAME.registerComponent('videohandler',{
         init: function(){
         let el = this.el;
         let vid = document.querySelector('#my_vid');
         let playing = false;
         vid.pause();
         el.addEventListener('click',function(){
           if(!playing) {
            vid.play();
         } else {
            vid.pause();
         }
         playing = !playing;
         });
        }
      });</script>

Beyond that, I have as an example:

<a-plane material="shader: flat; src:#my_vid" raycastable videohandler></a-plane>

Thank you so much for your help!

Answer 1

Alright, so I managed to figure it out and am posting this answer, so maybe the next person could find himself an answer:

<script>
      AFRAME.registerComponent('videohandler',{
         schema: {
            src: {type: 'string', default: ''}
          },

         init: function(){
         let el = this.el;
         let vid = document.querySelector(this.data.src);
         let playing = false;
         vid.pause();
         el.addEventListener('click', function(){
           if(!playing) {
            vid.play();
         } else {
            vid.pause();
         }
         playing = !playing;
         });
        }
      });</script>

To run in HTML, you call it in an entity:

<a-entity id="videoPlayer" material="src: #my_vid"  geometry="primitive: plane; height: 2; width: 3" videohandler="src: #my_vid"></a-entity>

Cheers!