Initially, it is uncertain whether you are utilizing var in your template or not. If indeed you are using it, Vue will generate a warning in the template.
- Avoid using a JavaScript keyword as a property name like "var" in the expression :src="var"
Furthermore, altering the source element dynamically is not possible.
According to the HTML5 specification,
Modifying a source element and its attribute dynamically when the
element is already inserted in a video or audio element will not result in any changes. To adjust what is being played, simply utilize the src attribute on the media element directly, maybe leveraging the canPlayType()
method to choose from available resources. Generally, manually manipulating source elements after the document has been parsed is an overly complex approach.
Hence, 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a6c6f7f5a283428342c">[email protected]</a>/dist/vue.js"></script>
<div id="app">
<video width="450" controls :src="video"></video>
<div>
<button @click="changeVideo">Change</button>
</div>
</div>