带有 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。我在这里缺少什么？

谢谢

原文由 Mario Catena 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

首先，我不知道您是否真的在模板中使用了 var ，但如果是，Vue 会在模板中抛出警告。

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

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

从 HTML5 规范，

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

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

 <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>

原文由 Bert 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

原文由 RWD 发布，翻译遵循 CC BY-SA 4.0 许可协议