Question

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

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

播放器没有加载视频，但我的var使用正确的网址正确设置。我在这里失踪了什么？

由于

Answer 1

首先，我不知道您是否在模板中使用var，但如果您是，Vue将在模板中发出警告。

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

其次，您无法动态更改源元素。

来自HTML5 specification，

动态修改源元素及其属性元素已插入视频或音频元素将没有影响。要更改正在播放的内容，只需使用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>

Answer 2

尝试在控制器中将整个int curAngle = (int)el.Rotation; if (curAngle < 10 && angle > 350) { await el.RotateTo(0, 125); el.Rotation = 359.9; await el.RotateTo(angle, 125); } else if (curAngle > 350 && angle < 10) { await el.RotateTo(360, 125); el.Rotation = 0.1; await el.RotateTo(angle, 125); } else { await el.RotateTo(angle, 250); }设置为变量。

GROUP BY

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

Answer 4

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

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

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

带有vue的HTML 5视频和src值

4 个答案: