A 帧视频

问题描述 投票:0回答:0

我有 3 个视频要在 A 帧场景中运行。视频和 j/s 的代码合二为一。我想知道我需要在视频 2 和 3 的 JavaScript 中更改什么 视频代码

我试过用 js 玩,但它只适用于一个视频,但不适用于每个单独的视频

感谢任何帮助

这是html a-frame框架

<a-entity>
          <a-video id="berlin" src="video/berlin.mp4" position="4.0 1.6 4.757" rotation="0 180 0" width="2" height="1.125">
      </a-video>
      <!-- TV background -->
      <a-plane id="videoControls" position="4.0 0.854 4.767" scale="2 0.386 1.714" rotation="0 -180 0" opacity="1"
        src="images/tv_background.jpg">
        <!-- Play button -->
        <a-plane id="vidplaybox1" src="images/btnPlay.png" scale="0.122 0.678 0.122" position="-0.350 0 .01"
          shader="flat" transparent="true" videoplayer></a-plane>
        <!-- Stop button -->
        <a-plane id="vidpausebox1" src="images/btnPause.png" scale="0.122 0.678 0.122" position="0.350 0 .01"
          shader="flat" transparent="true" videopauser></a-plane>
      </a-plane>
    </a-entity>

    <a-entity>
      <a-video id="shanghai" src="video/shanghai.mp4" autoplay loop="false" position="0 1.6 4.757" rotation="0 180 0"
        width="2" height="1.125"></a-video>
      <!-- TV background -->
      <a-plane id="videoControls" position="0 0.854 4.767" scale="2.0 0.386 1.714" rotation="0 -180 0" opacity="1"
        src="images/tv_background.jpg">
        <!-- Play button -->
        <a-plane id="vidplaybox2" src="images/btnPlay.png" scale="0.122 0.678 0.122" position="-0.350 0 .01"
          shader="flat" transparent="true" videoplayer></a-plane>
        <!-- Stop button -->
        <a-plane id="vidpausebox2" src="images/btnPause.png" scale="0.122 0.678 0.122" position="0.350 0 .01"
          shader="flat" transparent="true" videopauser></a-plane>
      </a-plane>
    </a-entity>


  AFRAME.registerComponent('videoplayer', {
    init: function() {
     let videosource = document.querySelector('#berlin');
     let videoplay = () => {
       videosource.play();
     }
     this.el.addEventListener('click', videoplay);
   }
 });

AFRAME.registerComponent('videopauser', {
  init: function() {
    let videosource = document.querySelector('#berlin');
    let videopause = () => {
      videosource.pause();
    }

    this.el.addEventListener('click', videopause);
  }
});

AFRAME.registerComponent('videoplayer', {
  init: function() {
    let videosource = document.querySelector('#shanghai');
    let videoplay = () => {
      videosource.play();
    }
    this.el.addEventListener('click', videoplay);
  }
});
AFRAME.registerComponent('videopauser', {
  init: function() {
    let videosource = document.querySelector('#shanghai');
    let videopause = () => {
      videosource.pause();
    }

    this.el.addEventListener('click', videopause);
  }
});



aframe
© www.soinside.com 2019 - 2024. All rights reserved.