2017-08-04 19 views
2

vue-youtube-embedライブラリを使用して、Vue.jsコンポーネントの中にYoutubeプレーヤーを表示しています。vue-youtube-embed nullのプロパティ 'src'を読み取れません

コンポーネントは最初に読み込まれたときに機能しますが、あとでビデオを再生できません。私は、これがコンポーネントが後に破棄され、再度マウントされたときだと思います。

私のサイトでは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. 新しいステーションを作成します。
  3. それを再生するプレイリストでその上に結果
  4. クリック
  5. は今、あなたは
  6. を作成した駅に戻るには再び前進バックメインページに行くために戻るボタンをクリックします

もう一度ビデオを再生してみloadVideoByIdを呼び出すときに、それはちょうどですので、私はそのプレイヤーは(ないnull)ロードされたと準備ができているようでデバッグするとき、私は、任意のコードを投稿しませんでした。

答えて

2

問題は、DOMからYoutubeプレーヤーを切り離していたようですが、これを削除するとPlayerオブジェクトからこのエラーが発生し始めたので、解決策を見つけることができませんでした。代わりに、

v-show

代わりの

v-if

を使用して
関連する問題