我正在使用vue-youtube-embed用于在 Vue.js 中显示 Youtube 播放器的库组件。
当我第一次加载组件时，播放器运行良好，但稍后无法播放视频。我认为这是组件稍后被销毁并再次安装的时候。
在我的网站中，我使用路由器 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 上自行查看错误。 (开发中)
要重新创建错误:
- 创建一个新电台
- 在播放器下方的文本输入中，您可以搜索 YouTube 视频，搜索视频并在搜索结果中点击它
- 在播放列表中点击它即可播放
- 点击后退按钮返回主页
- 现在再次前进以返回您创建的电台
- 尝试再次播放视频
我没有发布任何代码，因为它只是在调用 loadVideoById 时，当我调试时，似乎播放器已加载并准备就绪(不是 null)。
最佳答案
问题似乎是从 DOM 中分离 Youtube 播放器，一旦删除它，您就会开始从 Player 对象中收到此错误，我找不到解决方案，所以我只是使用它始终保持其组件打开
v-show
而不是
v-if
关于javascript - vue-youtube-embed 无法读取 null 的属性 'src'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45513049/