Video A帧切换模板导致声音（视频？）重叠 我的行动（已编辑）：

我正在使用A-Frame和A-Frame模板组件。
我使用模板组件从标签加载模板，如中所示

我想使用el.setAttribute动态更改模板，类似于下面的例子

我的模板包含一个源为视频的元素。
我可以加载一个模板，它就像一个符咒。我可以暂停，播放，等等

当我要将模板切换到使用相同视频资源的新模板，或加载新模板，然后返回到第一个模板时，会出现此问题

现在我有两个声音-一个没有同步到视频

显示一个视频，但在背景中播放第二个声音。我还可以确认声音不是来自显示的视频。我仍然可以播放/暂停它，它的声音在背景中播放

已编辑
我希望不仅能够修改元素，还能够修改其他一些元素，这就是我希望使用模板组件的原因。也就是说，我不知道最终会使用哪些资产，我不想使用资产管理系统来加载数十Mb的视频/对象和其他内容，并在加载屏幕上暂停用户。如上所述：

在浏览器获取（或出错）所有资源或资源系统达到超时之前，场景不会渲染或初始化

为了进一步阐明我的意图，但仍然保持简单，我希望用户能够通过选择预制（假设每个视频15Mb，即使有6-7个资源，也可能达到100Mb），或通过上传一个来改变场景。我真的希望避免重新加载页面，因为从用户角度来看，这不是一个优雅的解决方案

我猜： 我认为旧的录像带没有被完全处理掉。我尝试在各种元素/材料/视频本身上使用three.js.dispose（）方法，但没有成功。
我还尝试使用作为源，并在切换之前删除元素，但结果相同

问题

• 如何正确删除模板加载的元素，使视频不会存储/缓存在任何地方
• 我可以设置autoplay=“false”或类似于视频吗
• 如果我的方法完全错误，你能给我指出正确的方向吗

---

例子：

功能切换VideoToFirst（）{
console.log（“切换到第一个”）；
document.getElementById（“skyVideoTemplate”）.setAttribute（“template”、“src”、“firstVideo”）；
}
函数开关VideoToSecond（）{
console.log（'切换到第二个'）；
document.getElementById（“skyVideoTemplate”）.setAttribute（'template'，'src'，'#secondVideo'）；
}
函数playVideo（）{
document.getElementById（“skyVideo”）.components.material.material.map.image.play（）；
}
函数pauseVideo（）{
document.getElementById（“skyVideo”）.components.material.material.map.image.pause（）；
}

将视频切换到第一个
将视频切换到秒




玩
暂停

我认为您直接遇到了这个问题-一旦

a-frame

从一个内联URL创建了一个

，它就会忘记它。这是相关的，因为模板组件只是在添加和元素

因此，问题的一个大简化是——一个被移除的视频球仍在播放视频：

setTimeout（e=>{
让sky=document.querySelector（“a-sky”）
sky.parentNode.removeChild（天空）
}，2000）

感谢您的回复。这是有用的，因为资产管理系统可能会解决声音问题，但我还不能将其标记为一个答案，因为如果您有大量资产，那么这将不是一个合适的解决方案，加载它们可能会让用户在加载屏幕上停留很长时间。我更新了我的question@PiotrKolecki好的，我已经更新了我的答案，让我知道现在是否更好这确实解决了将模板更改为其他模板时的声音问题。但是，如果您尝试重新加载相同的模板（或具有相同视频的不同模板），则声音仍会在背景中从头开始播放（而我仍然可以在第二个实例上使用暂停/播放？）。我添加了另一个例子。我会接受你的回答，因为它确实帮助我找到了解决这个问题的方法，因为它可能是相关的，因为a-Frame使用标准html标记