javascript - 更改videosphere上的源会更新DOM，但不会渲染

我有两个视频资产，我想根据用户交互在两个视频资产之间进行切换。

<a-assets>
  <video id="video" src="./<filename>.mp4" autoplay loop crossorigin></video>
  <video id="video2" src="./<filename>.mp4" autoplay loop crossorigin></video>
</a-assets>

这些资产在同一<a-scene>中的视频领域中引用。

<a-videosphere id="videosphere" src="#video" rotation="0 270 0"></a-videosphere>

当交互式元素<a-sphere>被摄像机光标聚焦时，将触发逻辑，该逻辑交换视频层源并播放新视频。

document.querySelector('<interactive element>').addEventListener('mouseenter', function () {
  var videosphere = document.querySelector('#videosphere');
  videosphere.setAttribute('src', '#video2');

  var video = document.querySelector(videosphere.getAttribute('src'));
  video.play();
});

事件成功触发，并且src更改反映在DOM中，但是未渲染新视频。我尝试使用<a-sky>代替<a-videosphere>，但结果相同。

将默认设置为src的<a-videosphere>时，两个视频均按预期播放。为了方便复制，我在Firefox Nightly 55.0a1中进行测试

在此先感谢您的帮助！

最佳答案

似乎更改material属性有效，而更改src属性无效。

videosphere.setAttribute('src', '#video'); // NO CHANGE
videosphere.setAttribute('material', 'src: #video;'); // SUCCESS

see aframevr issue #2636

关于javascript - 更改videosphere上的源会更新DOM，但不会渲染，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43664953/