2017-08-04 49 views
2

我正在使用vue-youtube-embed库在Vue.js组件内部显示Youtube播放器。vue-youtube-embed无法读取属性'src'null

播放器在我第一次加载组件时效果很好,但以后无法播放视频。我认为这是组件后来被销毁并重新安装的时候。

在我的网站我用一个router-view。当浏览到播放器组件在第一时间它的伟大工程,但如果我回到主页,然后向前再次播放器组件,我得到这个错误:

Cannot read property 'src' of null 

完整的堆栈跟踪:

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) 

玩家似乎很好,我只在使用loadVideoById方法尝试播放视频时出现此错误。

您可以在my site上自己查看错误。 (WIP)

重现该错误:

  1. 创建一个新的站
  2. 在您可以搜索YouTube视频播放器下方的文本输入,搜索视频和搜索一下就可以了结果在播放列表中
  3. 点击它,发挥它
  4. 单击后退按钮返回到主界面
  5. 现在再往前走,返回到您创建
  6. 尝试播放视频再次

我没有张贴任何代码,因为它调用loadVideoById时只是,当我调试似乎播放器已加载并可以(不null)。

回答

2

看来问题是将Youtube播放器从DOM中分离出来,一旦你将它从播放器对象中移除,你就会发现这个错误,我找不到解决方案,所以我只是一直保留它的组件使用

v-show

,而不是

v-if