更改 videosphere 更新的来源 DOM 但不呈现

Question

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

<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> 被相机光标聚焦时，触发交换 videosphere 源并播放新视频的逻辑。

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> 但结果相同。

当设置为 <a-videosphere> 的默认值 src 时，两个视频都可以正常播放。出于重现目的，我正在 Firefox Nightly 55.0a1

中进行测试

在此先感谢您的帮助！

Answer 1

你试过这个吗：

videosphere.setAttribute('src', './<video2>.mp4');

而不是这个：

videosphere.setAttribute('src', '#video2');

Answer 2

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

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

see aframevr issue #2636

更改 videosphere 更新的来源 DOM 但不呈现

Changing sources on videosphere updates DOM but doesn't render

javascript

aframe