视频时间戳可以触发 A-Frame DOM/CSS/动画事件吗？答案

【问题标题】：Can an A-Frame DOM/CSS/animation event be triggered by video timestamps?视频时间戳可以触发 A-Frame DOM/CSS/动画事件吗？
【发布时间】：2018-06-15 21:43:21
【问题描述】：

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

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

【问题讨论】：

标签： html animation video three.js aframe

【解决方案1】：

这是个好主意。

您可以在资产中使用视频标签中的事件，因为它是标准的 html5 视频标签。

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

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

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>

【讨论】：

谢谢！我将 currentTime 视为一种可能性，但有选择总是好的。