Javascript 能否根据vuex状态动态更改视频？

我有一个小的网络应用程序，看起来像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问题：

---

之前发布的关于此的问题建议您更新源代码，如

。然而，我在这种方法上运气不佳

尝试使

src

属性动态化，并在单击按钮时更改数据

大概是这样的：

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

---

下面是一个视频播放器的示例，它允许您动态切换内容。我做了一个

v-reload

指令，当选择改变时，调用播放器上的

load

，这使它识别改变的

src

属性

newvue({
el:'主要'，
数据：{
已选择：0，
资料来源：[
'https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-SD.mp4',
'http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4'
]
},
指令：{
重新加载（el，绑定）{
if（binding.oldValue！==binding.value）{
el.load（）；
}
}
}
});

{{s}
抱歉，播放此视频时出现问题。请尝试使用其他浏览器

表示您应该更改
src
属性，并在进行更改后调用
player.load（）
和
player.play（）
。是否尝试绑定src属性？就像JulienMetal一样，很遗憾，这种方法对我不起作用either@RoyJ这不是从vuex加载资产的示例，我上面的代码（第一个片段）在iOS中没有显式调用任何pause（）或play（）方法，但在chromeIt中不起作用。无论从何处加载资产都无关紧要。问题在于
元素以及如何使用它。我想我可以走这条路，但它与我已设置的vuex存储没有关联，我觉得如果我通过data（）独立确定索引，而不是从vuex中获取索引，功能将被分割store@StephenTetreault这就是一个例子，只需将所有内容从
data（）
移动到您的存储中，然后从存储中获取/提交值即可。你知道怎么做吗？我知道，这就是我目前正在做的，但由于某些原因，它不起作用。它只在ios模拟器上的safari中起作用，但过一段时间就会冻结。我决定使用背景GIF，这与背景视频元素相比效果很好。