Question

当视频（或音频）文件到达视频对象本身之外的特定时间标记时，是否可以在A-Frame中触发事件？例如，影响附近原语的光或颜色属性？

我仍然在做这方面的发现工作，但在文档中找不到令人满意的答案。

Answer 1

这是一个好主意。

您可以使用资源中视频代码中的事件，因为它是标准的html5视频代码。

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

我创建了一个示例，用于侦听视频的timeupdate事件并计算到目前为止播放的百分比。然后，您可以触发a帧动画的事件。

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

如果您预览场景，7％的灯光会变暗，然后是10％和15％的动画。

你也可以使用video.currentTime值作为标记，而不是播放的百分比。

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')
      }
    })
  }
});

标记

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

可以通过视频时间戳触发A帧DOM / CSS /动画事件吗？

1 个答案: