A-Frame Video 360 Scenes

by Eduardo Flores

HTML

<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
<button id="play-button">Play</button>
<div class="controles">
<button id="bttn1" type="button" value="1">Scene1</button>
<button id="bttn2" type="button" value="2">Scene2</button>
<button id="bttn3" type="button" value="3">Scene3</button>
</div>  
    <a-scene>
      <a-box color="#6173F4" opacity="0.8" depth="2" position="0 0 -15"></a-box>
      <a-videosphere id="videosphere" src="#video1" ></a-videosphere>
      <a-entity camera position="0 1.6 0" look-controls wasd-controls>
      </a-entity>
      <a-assets>
      <!--Carga de un video
        1-Tener los 3 videos en diferentes nodos, y switchear cada uno
        2-Tener solo un nodo de video y con JS cambiar el src, poner play cuando el boton sea presionado
        https://cdn.glitch.com/22b261b9-0711-4289-b866-fcb3915273ce%2Fstage1.mp4?1500624242847
        https://cdn.glitch.com/22b261b9-0711-4289-b866-fcb3915273ce%2Fpark1.mp4?1500624850806
        https://cdn.glitch.com/22b261b9-0711-4289-b866-fcb3915273ce%2Framp1.mp4?1500625386518
        https://ucarecdn.com/fadab25d-0b3a-45f7-8ef5-85318e92a261/
      -->
        <video id="video1"  style="display:none;" loop crossorigin="anonymous" playsinline webkit-playsinline>
          <source type="video/mp4" src="https://cdn.glitch.com/22b261b9-0711-4289-b866-fcb3915273ce%2Framp1.mp4?1500625386518" />
        </video>
        <video id="video2" style="display:none;" crossorigin="anonymous" playsinline webkit_playsinline>
          <source type="video/mp4" src="https://cdn.glitch.com/22b261b9-0711-4289-b866-fcb3915273ce%2Fpark1.mp4?1500624850806">
        </video>
        <video id="video3" style="display:none" loop crossorigin="anonymous" playsinline webkit-playsinline>
          <source type="video/mp4" src="https://cdn.glitch.com/22b261b9-0711-4289-b866-fcb3915273ce%2Fstage1.mp4?1500624242847">
        </video>
      </a-assets>
    </a-scene>

CSS

button {
  z-index : 9999;
}

controles {
  height : 20px;
}
#play-button {
  position: fixed;
  top: calc(50% - 1em);
  left: calc(50% - 2em);
  width: 4em;
  height: 2em;
  z-index: 10;
}

JavaScript

let playButton = document.getElementById('play-button')
let button1 = document.getElementById("bttn1")
let button2 = document.getElementById("bttn2")
let button3 = document.getElementById("bttn3")
let videoSphere = document.getElementById("videosphere")

let video1= document.getElementById("video1")
let video2= document.getElementById("video2")
let video3= document.getElementById("video3")


button1.addEventListener("click", changeScene)
button2.addEventListener("click", changeScene)
button3.addEventListener("click", changeScene)

function changeScene(event){
if(videoSphere.getAttribute('src').includes(event.target.value))
  	return;
    //pausa el video actual antes de cambiar el src del videosphere
    console.log('>>>>>Pausing:'+videoSphere.getAttribute('src'))
	document.getElementById(videoSphere.getAttribute('src').replace('#','')).pause()

	console.log(event) //Objeto que contiene toda la informaciond el evento
  console.log(event.target.value) //Accediendo al target y valor del evento
  playButton.style.display = 'inline-block'
  switch(event.target.value){
  	case "1":
     console.log(">>>>>Load Scene 1")
     videoSphere.setAttribute('src','#video1')
    break;
    case "2":
    console.log(">>>>>Load Scene 2")
    videoSphere.setAttribute('src','#video2')
    break;
    case "3":
    console.log(">>>>>Load Scene 3")
    videoSphere.setAttribute('src','#video3')
    break;
    default:
    console.log(">>>>>No scene option")
    break;
  }
}


playButton.addEventListener('click',function(e){
//this.style.display = 'none';
console.log('calling play ')
const videoId= videoSphere.getAttribute('src').replace("#","")
switch(videoId){
	case 'video1':
  	video1.play();
  break;
  case 'video2':
  video2.play()
  break;
  case 'video3':
  video3.play()
  break;
}
}, false);