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

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

进行测试

提前感谢您的帮助！

Answer 1

在更改material属性时，更改src属性似乎不起作用。

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

see aframevr issue #2636

Answer 2

你试过这个：

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

而不是：

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

更改视频圈上的来源会更新DOM但不会渲染

2 个答案: