Question

我想制作一个脚本，该脚本可以根据是否单击视频来控制我的视频。我单击它们，然后播放，如果正在播放，则单击并暂停。

在我的示例中，与我曾经成功地在下面运行代码的其他有关堆栈溢出的答案不同的是，我希望拥有多个视频，所有视频均通过单独单击来控制。我尝试使用A视频和“视频”类： document.querySelector('a-video') // document.querySelector('.videos') 但它仍然无法播放。这是我的所有在一部视频时运行GREAT的代码：

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

干杯！

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

1 个答案: