你能根据 vuex 状态动态改变视频吗？

Question

我有一个小型网络应用程序，它看起来像 facetime。我想通过单击 "next" 按钮来切换视频元素，这将更新 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

尝试使 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
    }
  }
}

Answer 2

这是一个允许您动态切换内容的视频播放器示例。 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>

你能根据 vuex 状态动态改变视频吗？

can you dynamically change the video based on vuex state?

javascript

html5-video

vue.js

nuxt.js