Javascript 带有vue的HTML 5视频和src值

我的页面中有一个HTML5视频，我想动态设置src。 我使用的是vue，在我的js控制器中，我用视频路径设置了一个变量，然后在我的页面中使用该变量，如下所示：

<video width="450" controls>
    <source v-model="controller.var" v-bind:src="var" type="video/mp4">
</video>

播放器不会加载视频，但我的var已正确设置为正确的url。 我错过了什么

---

谢谢

尝试将整个

源设置为控制器中的变量

<video controls autoplay>
  {{{ src }}}
</video>

new Vue({
  el: '#app',
  data: {
    src: '<source src="#url" type="video/mp4">'
  }
})


{{{src}}}
新Vue({
el:“#应用程序”，
数据：{
src:'
}
})
首先，我不知道您是否在模板中实际使用了
var
，但如果是，Vue将在模板中抛出警告


避免在表达式中使用JavaScript关键字作为属性名：“var”：src=“var”

其次，不能动态更改源元素

从HTML5

当
元素已插入到视频或音频元素中，该元素将没有
效果。要更改正在播放的内容，只需在
直接使用media元素，可能使用canPlayType（）
方法从可用资源中进行选择。通常地
创建文档后手动操作源元素
解析是一种不必要的复杂方法

因此，将数据绑定到
video
元素的
src
属性

<video width="450" controls :src="video"></video>


改变
如果需要动态更改
src
，可以更改
src
并使用
.load（）
函数加载新的src


newvue({
el:“应用程序”，
数据：{
src:“
},
方法：{
更改视频（新闻资源中心）{
此.$data.src=newSrc；
//强制视频加载。
var vid=此。$refs.video；
参阅load（）；
}
}
})

变化1
变化2
将带有源URL的属性添加到视频元素将导致在URL更改时更新视频和源：



这支持动态替换视频+源。
是否可以包括您的vue代码？它似乎在这支笔里工作：它解决了问题；绑定视频元素的src属性效果很好。这个方法在我之前尝试的时候实际上并不适用。在iOS模拟器中，我很幸运地在视频标签的
标签上使用了
v-if
，检查了vuex中存储的变量。但是，它在桌面上的chrome中不起作用：（很好的技巧！谢谢！解决了我的问题，谢谢