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

Question

我想制作一个脚本，根据我是否点击它们来控制我的视频。我点击它们，它们开始播放，如果它们正在播放，我点击它们就会暂停。

我的示例与我在下面成功使用运行我的代码成功使用的堆栈溢出的其他答案不同的是，我想要多个视频，所有视频都通过单独点击来控制.我尝试使用视频和 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>

非常感谢您的帮助！

Answer 1

好吧，所以我设法弄明白了并发布了这个答案，所以也许下一个人可以找到自己的答案：

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

在HTML中给运行，你在一个实体中调用它：

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

干杯！

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

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

html

javascript

aframe