带有vue的HTML 5视频和src值

Question

我的页面中有一个HTML 5视频,我想动态设置src.我正在使用vue,在我的js控制器中我使用视频路径设置变量然后我在页面中使用变量如下:

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

播放器不加载视频,但我的var使用正确的URL正确设置.我在这里缺少什么？

谢谢

Answer 1

将带有源 URL的key属性添加到video元素将导致当 URL 更改时视频和源都更新：

<video
  :key="video"
  width="450"
  controls
>
  <source
    :src="video"
    type="video/mp4"
  >
</video>

这支持动态替换视频 + 源。

Answer 2

首先,我不知道你是否真的var在你的模板中使用,但如果你是,Vue将在模板中发出警告.

• 避免使用JavaScript关键字作为属性名称:表达式中的"var":src ="var"

其次,您无法动态更改源元素.

从HTML5 规范,

当元素已插入视频或音频元素时动态修改源元素及其属性将不起作用.要更改正在播放的内容,只需直接在媒体元素上使用src属性,可能会使用canPlayType()方法从可用资源中进行选择.通常,在解析文档之后手动操作源元素是不必要的复杂方法.

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

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

console.clear()

new Vue({
  el:"#app",
  data:{
    video: "https://www.w3schools.com/tags/movie.mp4"
  },
  methods:{
    changeVideo(){
      this.video = "http://techslides.com/demos/sample-videos/small.mp4"
    }
  }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <video width="450" controls :src="video"></video>
  <div>
    <button @click="changeVideo">Change</button>
  </div>
</div>