介绍视频

Question

我使用a-frame 360 gallery作为个人项目的起点。

我的场景总共有35个360º的图像。 我还包括一个播放ont的mp4视频。

问题是我真的不需要一个帧或任何图像，我只在视频播放完毕时才这样做。 正如我已经阅读here我希望在视频播放完毕后注入aframe脚本和场景。

我尝试过在资产和懒惰资产加载中使用超时，没有任何运气。

我该怎么做？

谢谢！

Answer 1

不使用诸如Angular，VueJs或（Aframe）React之类的框架，您可以动态加载组件（场景），注入＆＃39;场景并非完全不可能。

加载＆＃39;没有框架的动态场景可以将场景元素包装在a-entity元素中，并将其可见性属性设置为false。

e.g：

<video #videoEl src="..."></video>
<a-scene>
  <a-entity #sceneEntity visible="false">
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-box position="-1 0.5 -3" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
    <a-sky color="#ECECEC"></a-sky>
  </a-entity>
</a-scene>

<script>
  const videoEl = document.getElementById('videoEl');
  videoEl.onended = e => {
    document.getElementById('sceneEntity').setAttribute('visible', true);
  }
</script>

另一种方法是在视频元素完成时将整个场景作为字符串附加到DOM。这就是所提到的框架能够以复杂的方式提供的内容。

我建议的是在播放视频时暂停场景（document.getElementsByTagNames('a-scene')[0].pause()）。目前我不知道将实体的可见性属性设置为false会暂停它的生命周期。