Currently, I am utilizing the vue-youtube-embed library to embed a YouTube player within a Vue.js component.
Initially, the player functions perfectly upon loading the component. However, it fails to play videos after the component is destroyed and then mounted again.
On my website, I incorporate a router-view. When I navigate to the player component for the first time, everything works fine. But if I return to the home page and revisit the player component, I encounter this error:
Cannot read property 'src' of null
Here is the complete 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 appears to be functioning correctly, and I only encounter this issue when attempting to play a video using the loadVideoById method.
You can explore the error firsthand on my website. (Work in Progress)
To replicate the error:
- Create a new station
- In the text input below the player, search for a YouTube video, select it from the search results
- Click on the playlist to play the video
- Use the back button to return to the main page
- Navigate back to the station you created
- Attempt to play the video again
I omitted posting any code as the issue arises specifically when calling the loadVideoById method; during debugging, it appears that the player is loaded and ready (not null).