CODEWITHSUNDEEP
javascriptyoutube-apivue.js
Dan Levin
Dan Levin

Reputation: 714

vue-youtube-embed Cannot read property 'src' of null

I'm using the vue-youtube-embed library to display a Youtube player inside of a Vue.js component.

The player works great when I first load the component, but fails to play videos later. I think this is when the component is later destroyed and mounted again.

In my site I use a router-view. When navigating to the player component the first time it works great, but if I go back to the home page and then forward again to the player component, I get this error:

Cannot read property 'src' of null

Full stack trace:

www-widgetapi.js:121 Uncaught TypeError: Cannot read property 'src' of
null at W.g.C
(https://s.ytimg.com/yts/jsbin/www-widgetapi-vflQKB5wA/www-widgetapi.js:121:84)
at V
(https://s.ytimg.com/yts/jsbin/www-widgetapi-vflQKB5wA/www-widgetapi.js:113:99)
at W.(anonymous function).getCurrentTime.Mb.(anonymous function) [as
loadVideoById]
(https://s.ytimg.com/yts/jsbin/www-widgetapi-vflQKB5wA/www-widgetapi.js:130:11)
at VueComponent.play (eval at (http://localhost:8080/app.js:1037:1),
:136:31) at VueComponent.boundFn [as play] (eval at
(http://localhost:8080/app.js:729:1), :165:14) at Vue$3.eval (eval at
(http://localhost:8080/app.js:1037:1), :73:18) at Vue$3.Vue.$emit
(eval at (http://localhost:8080/app.js:729:1), :2207:16) at
VueComponent.playSong (eval at (http://localhost:8080/app.js:1058:1),
:123:73) at boundFn (eval at (http://localhost:8080/app.js:729:1),
:165:14) at Proxy.invoker (eval at
(http://localhost:8080/app.js:729:1), :1738:18)

The player seems to be fine, and I only get this error when trying to play a video using the loadVideoById method.

You can look at the error yourself on my site. (WIP)

To recreate the error:

  1. Create a new station
  2. In the text input below the player you can search for youtube video, search for a video and click on it in the search results
  3. Click on it in the playlist to play it
  4. Click the back button to go back to the main page
  5. Now go forward again to return to the station you created
  6. Try to play the video again

I didn't post any code because it's just when calling loadVideoById, when i debug it seems that player is loaded and ready (not null).

Upvotes: 2

Views: 2427

Answers (2)

tarte
tarte

Reputation: 11

If it looks like this ...

html

<youtube @ready="ready" ....>

js

ready(event) {
  this.player = event.target;
  ....
}

This worked for me ...

created or when change videoId

this.player = null;

Upvotes: 1

Dan Levin
Dan Levin

Reputation: 714

It seems that the problem was detaching the Youtube player from the DOM, once you remove it you start getting this error from the Player object, i couldn't find a solution so instead i just kept its component on all the time using

v-show

instead of

v-if

Upvotes: 2

Related Questions