HTML 5 video and src value with vue

If you need to change the src dynamically, you can change the src and load the new src with the .load() function.

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/[email protected]/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>

First, I don't know if you are actually using var in your template, but if you are, Vue will throw a warning in the template.

• avoid using JavaScript keyword as property name: "var" in expression :src="var"

Second, you cannot dynamically change the source element.

From the HTML5 specification,

Dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect. To change what is playing, just use the src attribute on the media element directly, possibly making use of the canPlayType() method to pick from amongst available resources. Generally, manipulating source elements manually after the document has been parsed is an unnecessarily complicated approach.

So, bind your data to the src attribute of the video element.

<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/[email protected]/dist/vue.js"></script>
<div id="app">
  <video width="450" controls :src="video"></video>
  <div>
    <button @click="changeVideo">Change</button>
  </div>
</div>

Adding the key attribute with the source's URL to the video element will cause both video and source to be updated when the URL changes:

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

This supports dynamic replacement of a video + source.