A-Frame 并动态添加视频答案

【问题标题】：A-Frame and add video dynamicalyA-Frame 并动态添加视频
【发布时间】：2020-05-19 11:52:50
【问题描述】：

我有

<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
 ...
  <a-assets>
     <video id="losevideo" autoplay loop="true" src="images/losevideo_oA.mp4" crossorigin="anonymous" playsinline webkit-playsinline></video>
  </a-assets>
 ...
<a-video id="alosevid3" webkit-playsinline playsinline autoplay loop="true" src="#losevideo" position="-5 0 -5" rotation="0 0 0" scale="0.01 0.01 0.01"></a-video>

在我拥有的组件内部

    let videoEl = document.createElement('a-video');
    videoEl.setAttribute('id', 'loseVidEl'); // Create a unique id for asset
    videoEl.setAttribute('src', '#losevideo');
    videoEl.setAttribute('height', '4.9');
    videoEl.setAttribute('width', '4');
    videoEl.setAttribute('position', '0 0.001 -5');
    videoEl.setAttribute('rotation', '-90 0 0');
    scene.appendChild(videoEl);

该视频按预期播放。（而且alosevid3 是不可见的，因为它太小了）

如果我尝试

<a-video id="alosevid3" webkit-playsinline playsinline autoplay loop="true" src="#losevideo" position="-5 0 -5" rotation="0 0 0" visible="false"></a-video>

(visible=false) 我的 lostVidEl 出现黑屏。（就像我没有视频一样）有人可以向我解释这种行为吗？

添加 - 这是 Firefox 中的行为。在 Oculus 浏览器和 Chrome (MacOS) 中，视频屏幕为黑色。（视频直接加载播放）

【问题讨论】：

标签： video aframe webxr

【解决方案1】：

这似乎是a-frame的（不可靠的）资产管理系统的问题（可能是底层的three.js缓存）。类似的问题： https://github.com/aframevr/aframe/issues/4080

现在我正在直接加载视频 videoEl.setAttribute('src', 'images/winvideo_oA.mp4');

就我而言，这就足够了。

【讨论】：