Question

我正在尝试使用视频列表创建视频仪表板。

我目前正在使用:src更改src组件上的<a-video>。当用户输入的视频发生变化时（现在是键盘输入），即使更改了src，旧的视频也会在后台播放。

我的猜测是因为aframe和vue都创建了自己的虚拟dom，即使vue在src更改时销毁了项目，aframe仍会缓存它，因此无论vue中的状态如何都会播放。

我是否可以通过vue方面的每个数据更改重新启动<a-video>？

Answer 1

单独使用:src标记时更改<a-video>将无效。

建议的解决方法：使用<a-asset>保留视频，然后更改其来源。

＆＃13;

new Vue({
  el: '#app',
  data: {
    srcJungle: 'https://cors-anywhere.herokuapp.com/https://www.w3schools.com/html/movie.mp4',
    srcCity: 'https://ucarecdn.com/fadab25d-0b3a-45f7-8ef5-85318e92a261/',
    currentSrc: ''
  },
  created() {
    this.currentSrc = this.srcJungle;
  } 
})

＆＃13;

a-scene canvas {
   border: 1px solid red;
   height: 100px !important;
}

＆＃13;

<script src="https://unpkg.com/vue"></script>
<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>

<div id="app">
  <pre>Current src: {{ currentSrc }}</pre>
  
  <button @click="currentSrc = srcCity" :disabled="currentSrc === srcCity">
  Change to City (takes some time to load)</button>
  <button @click="currentSrc = srcJungle" :disabled="currentSrc === srcJungle">
  Change to Jungle (takes some time to load)</button>
  <hr>
  <a-scene>
    <a-assets>
      <video id="vue-video" autoplay loop="true" :src="currentSrc"></video>
    </a-assets>
    <a-video src="#vue-video" width="100%" height="100%"  position="0 0 -20">
  </a-video>
</a-scene>
</div>

＆＃13;

注意：仅使用<a-video>不起作用。看起来像一个错误。

＆＃13;

new Vue({
  el: '#app',
  data: {
    srcJungle: 'https://cors-anywhere.herokuapp.com/https://www.w3schools.com/html/movie.mp4',
    srcCity: 'https://ucarecdn.com/fadab25d-0b3a-45f7-8ef5-85318e92a261/',
    currentSrc: ''
  },
  created() {
    this.currentSrc = this.srcJungle;
  } 
})

＆＃13;

a-scene canvas {
   border: 1px solid red;
   height: 100px !important;
}

＆＃13;

<script src="https://unpkg.com/vue"></script>
<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>

<div id="app">
  <pre>Current src: {{ currentSrc }}</pre>
  
  <button @click="currentSrc = srcCity" :disabled="currentSrc === srcCity">
  Change to City (takes some time to load)</button>
  <button @click="currentSrc = srcJungle" :disabled="currentSrc === srcJungle">
  Change to Jungle (takes some time to load)</button>
  <hr>
  <a-scene :key="currentSrc">
    <a-video :src="currentSrc" width="100%" height="100%"  position="0 0 -20">
  </a-video>
</a-scene>
</div>

＆＃13;

Aframe vue视频更改src

1 个答案: