Question

我有一个小型Web应用程序，它看起来像伪装时间。我想通过单击“下一步”按钮切换视频元素，这将更新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模拟器中，但不适用于台式机镶边。

我也尝试过这种方法：

    <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

这里是一个视频播放器的示例，它允许您动态切换内容。我做了一个v-reload指令，当选择更改时，会在播放器上调用load，这会导致播放器识别出更改后的src属性。

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状态动态更改视频吗？

2 个答案: