Play Video onEnter aframe

Question

How can I play an a-video through JavaScript. I can put a video in my aframe scene and it autostarts but I want to have it play only when one is looking at it. Triggered by onEnter, onExit etc. I couldn't find documentation on playing a video through JavaScript.

Answer 1

If You have Your video defined in the <a-assets>, You can use the .play(), .stop(), .pause() methods, from the media API, Its neatly listed here: https://www.w3schools.com/tags/ref_av_dom.asp.

You can make a custom component:
JS:

AFRAME.registerComponent('video-handler',{
  init: function(){
   let el = this.el;
   let video = document.querySelector("#myvideo");
   vid.pause();
   el.addEventListener('mouseenter',function(){
      video.play();
   });
   el.addEventListener('mouseleave',function(){
      video.pause();
   });
  }
});

HTML:

<a-assets >
  <video id="myvideo" src="urltovideo"></video>
</a-assets>
<a-plane material="src:#myvideo" video-handler></a-plane>