change src of video tag dynamicly in nuxt js

Question

i'm using nuxt.js . i have a tag and i want to change the src dynamically but i cannot call load() method to refresh the video and start playing .

tag :

<video ref="videoPlayer">

"change video" function in nuxt methods :

 this.videoUrl = "new url";
 let videoPlayer = this.$refs['videoPlayer'];
 videoPlayer.load();

load() not working ! it has error . i cannot access load() method ! why ? what should i do ?

error :

cannot read property 'load' of undefined

score 1 · Accepted Answer · answered Jul 26 '20 at 09:50

1

Define videoUrl in data:

data() {
 return {
  videoUrl: 'path/to/old/video'
 }
}

The template in html:

 <video
  ref="videoPlayer"
  muted
  controls
 >
  <source :src="videoUrl" type="video/mp4" />
 </video>

In a methods or a Nuxt hook:

changeVideoUrl() {
 this.videoUrl = '/videos/home/intro-desktop.mp4'
 const videoPlayer = this.$refs.videoPlayer
 videoPlayer.load()
 videoPlayer.play()
},

Is important to define videoUrl in data to activate Vue reactivity system properly.

answered Jul 26 '20 at 09:50

Wonderman

931
10
21

i have data() i'm using it , but error come from load() method : cannot read property 'load' of undefined ! – Qasem Salehy Jul 26 '20 at 10:20
2

I've implemented in my source code as above and works without errors. – Wonderman Jul 26 '20 at 10:38
:/ i remove the if from video tag and its working :| sh****t :| ::::: v-if="playing === true" only play if user click play video ! that condition was the problem :| – Qasem Salehy Jul 26 '20 at 12:22
TO – Qasem Salehy Jul 26 '20 at 12:23

change src of video tag dynamicly in nuxt js

1 Answers1