Can an A-Frame DOM/CSS/animation event be triggered by video timestamps?

Question

Can I trigger an event in A-Frame when a video (or audio) file hits a specific time mark, outside of the video object itself?? For instance, affecting the light or colour attributes of a nearby primitive?

I'm still doing the discovery work on this, but can't find a satisfying answer in the docs.

Answer 1

That's a great idea.

You can use events from the video tag in the assets, as it's a standard html5 video tag.

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

I've created an example that listens to the video's timeupdate event and calculates the percentage played so far. Then you can trigger the events for the a-frame animations.

https://glitch.com/edit/#!/a-frame-video-listener

If you preview the scene, at 7% the light should dim, followed by the animations at 10 and 15 percent played.

You could also use the video.currentTime value as a stamp, instead of percent played.

AFRAME.registerComponent('video-listener', {
  init: function () {
    const video = document.querySelector('#buck-bunny-src')
    const mainLight = document.querySelector('#mainLight')
    const leftBox = document.querySelector('#leftBox')
    const rightBox = document.querySelector('#rightBox')

    video.addEventListener('timeupdate', (e) => {
      var percentPlayed = Math.floor((100 / video.duration) * video.currentTime)
      if (percentPlayed === 7) {
       mainLight.emit('shouldDim') 
      }
      if (percentPlayed === 10) {
       leftBox.emit('shouldPlay')
      }
      if (percentPlayed === 15) {
       rightBox.emit('shouldPlay')
      }
    })
  }
});

For the markup

<a-scene video-listener>
  <a-assets>
    <video id="buck-bunny-src" autoplay loop="true" src="https://cdn.glitch.com/e2efbce0-d4db-4948-8e6a-4af4335addb1%2FSampleVideo_1280x720_5mb.mp4?1515224877298"></video>
  </a-assets>

  <a-light id="mainLight" type="point" intensity="1.2" position="0 4 -5">
    <a-animation attribute="light.intensity"
           begin="shouldDim"
           dur="5000"
           fill="forwards"
           to="0.3"></a-animation>
  </a-light>

  <a-video src="#buck-bunny-src" width="16" height="9" position="0 0 -20"></a-video>

  <a-box id="leftBox" color="red" depth="1" height="1" width="0.5" position="-3 1 -3">
    <a-animation attribute="rotation"
           begin="shouldPlay"
           dur="10000"
           fill="forwards"
           to="0 360 0"
           repeat="indefinite"></a-animation>
  </a-box>
  <a-box id="rightBox" color="blue" depth="1" height="1" width="0.5" position="3 1 -3">
    <a-animation attribute="rotation"
           begin="shouldPlay"
           dur="10000"
           fill="forwards"
           to="360 360 0"
           repeat="indefinite"></a-animation>
  </a-box>
  <a-sky color="#222"></a-sky>
</a-scene>