如何制作播放和暂停多个 aframe a-video 实体的脚本

Question

我想制作一个脚本，可以根据我点击它们来控制我的视频。我点击它们，它们开始播放，如果它们正在播放，我点击它们然后它们暂停。

在我的示例中，与我用来在下面成功运行代码的堆栈溢出的其他答案不同的是，我想要多个视频，所有视频都由单独的单击控制。我尝试使用 a-video 和 class 'videos': document.querySelector('a-video') // document.querySelector('.videos') 但它仍然无法播放。这是我的所有代码，当有一个视频时运行良好：

      <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>

除此之外，我举了一个例子：

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

非常感谢你的帮助！