您可以根据 vuex 状态动态更改视频吗？

Question

我有一个小型网络应用程序，它看起来像 facetime。我想通过单击“下一步”按钮来切换视频元素，该按钮将更新 vuex 中的值，视频将相应地换出。我试过这样：

<video autoplay playsinline loop muted class="background-video__source"> 
      <source v-if="currentIndex === 0" src="~assets/img/placeholder/placeholder-1.mp4" type="video/mp4">
      <source v-if="currentIndex === 1" src="~assets/img/placeholder/placeholder-2.mp4" type="video/mp4">
      <source v-if="currentIndex === 2" src="~assets/img/placeholder/placeholder-3.mp4" type="video/mp4">
      <source v-if="currentIndex === 3" src="~assets/img/placeholder/placeholder-4.mp4" type="video/mp4">
</video>

上述方法适用于 safari 的 ios 模拟器，但不适用于桌面 chrome。

这个方法我也试过了：

    <video v-if="currentIndex === 0" autoplay playsinline loop muted class="background-video__source"> 
      <source src="~assets/img/placeholder/placeholder-1.mp4" type="video/mp4">
    </video>
    <video v-if="currentIndex === 1" autoplay playsinline loop muted class="background-video__source"> 
      <source src="~assets/img/placeholder/placeholder-2.mp4" type="video/mp4">
    </video>
    <video v-if="currentIndex === 2" autoplay playsinline loop muted class="background-video__source"> 
      <source src="~assets/img/placeholder/placeholder-3.mp4" type="video/mp4">
    </video>
    <video v-if="currentIndex === 3" autoplay playsinline loop muted class="background-video__source"> 
      <source src="~assets/img/placeholder/placeholder-4.mp4" type="video/mp4">
</video>

但是这种方法不管用。

在最坏的情况下，我可以使用 GIF 代替视频，但视频的效果会更好。

之前的 SO 问题：

之前发布的有关此问题的问题是指您更新源，例如<video autoplay playsinline loop muted :src="someVarSource" class="background-video__source">。但是，我对这种方法没有运气。

Answer 1

这是一个视频播放器示例，可让您动态切换内容。 I made a v-reload directive that, when the selection changes, calls load on the player, which causes it to recognize the changed src attribute.

new Vue({
  el: 'main',
  data: {
    selected: 0,
    sources: [
      'https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-SD.mp4',
      'http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4'
    ]
  },
  directives: {
    reload(el, binding) {
      if (binding.oldValue !== binding.value) {
        el.load();
      }
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<main>
  <div v-for="s, i in sources">
    <label>
      <input type="radio" :value="i" v-model="selected">
      {{s}}
    </label>
  </div>
  <video controls v-reload="selected">
      <source :src="sources[selected]" type="video/mp4" media="all"> 
      <p>Sorry, there's a problem playing this video. Please try using a different browser.</p>
  </video>
</main>

Answer 2

尝试使src 属性动态化并更改按钮单击时的数据。

类似这样的：

<video autoplay playsinline loop muted class="background-video__source"> 
  <source :src="'~assets/img/placeholder/' + currentSource" type="video/mp4">
</video>

data () {
  return {
    currentIndex: 0,
    currentSource: "placeholder-0.mp4",
    sources: [
      {id: 0, name: "placeholder-0.mp4"}
      {id: 1, name: "placeholder-1.mp4"}
      {id: 2, name: "placeholder-2.mp4"}
      {id: 3, name: "placeholder-3.mp4"}
    ]
  }
},
methods: {
  changeVideo () {
    // check if it was't the last video source in the list and change the video 
    if (sources[this.currentIndex + 1] != undefined) {
      this.currentIndex += 1
      this.currentSource = sources[this.currentIndex + 1].name
    }
  }
}