带有 vue 的 HTML 5 视频和 src 值答案

【问题标题】：HTML 5 video and src value with vue带有 vue 的 HTML 5 视频和 src 值
【发布时间】：2017-06-25 13:13:17
【问题描述】：

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

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

播放器没有加载视频，但我的 var 正确设置了正确的 url。我在这里缺少什么？

谢谢

【问题讨论】：

你能把你的vue代码包括进来吗？它似乎在这支笔中工作：codepen.io/anon/pen/bRogVw

标签： javascript vue.js

【解决方案1】：

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

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

第二，不能动态改变源元素。

来自 HTML5 specification，

动态修改源元素及其属性元素已插入视频或音频元素将没有影响。要更改正在播放的内容，只需使用 src 属性直接媒体元素，可能使用 canPlayType() 从可用资源中挑选的方法。一般来说，在文档完成后手动操作源元素 parsed 是一种不必要的复杂方法。

因此，将您的数据绑定到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>

【讨论】：

解决了这个问题；绑定 video 元素的 src 属性可以正常工作。 Tnx。
当我之前尝试过时，这个方法实际上对我不起作用。在 iOS 模拟器中，我确实幸运地在视频标签中的 <source> 标签上使用了 v-if，检查了存储在 vuex 中的变量。但是，它在桌面上的 chrome 中不起作用:(

【解决方案2】：

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

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

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

【讨论】：

非常感谢兄弟！我遇到了类似的问题

【解决方案3】：

如果您需要动态更改src，您可以更改src并使用.load()函数加载新的src。

new Vue({
  el:"#app",
  data:{
    src: ""
  },
  methods:{
    changeVideo(newSrc){
      this.$data.src = newSrc;
      //Force video load.
      var vid = this.$refs.video;
      vid.load();

    }
  }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <video width="450" controls :src="src" ref="video"></video>
  <div>
    <button @click="changeVideo('http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4')">Change1</button>
        <button @click="changeVideo('https://www.w3schools.com/tags/movie.mp4')">Change2</button>
  </div>
</div>

【讨论】：

【解决方案4】：

尝试将整个source 设置为控制器中的变量。

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

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

【讨论】：