2017-12-12 34 views
1

私はVuejsを使用していると私は、このようにJWPlayerのビデオを埋め込むことdynaically DOM内のスクリプトタグを挿入する必要があります。Vuejs 2:スクリプトタグのjavascriptファイルを動的にDOMに組み込む(そして実行する)方法は?

<body> 
<!-- HTML content --> 
<script src="//content.jwplatform.com/players/KZVKrkFS-RcvCLj33.js"></script> 
<!-- More HTML content --> 
<script src="//content.jwplatform.com/players/ANOTHER-ID-ANOTHER-PLAYERID.js"></script> 
</body> 

私は結果なしで使用している:V-HTMLディレクティブをhtmlタグをレンダリングします。同様にv-bind:srcしかし、どちらもコードを実行しません。私はこの解決策を見つけましたが、どちらもうまくいきませんでした:How to add external JS scripts to VueJS Components

私はこのソリューションを使用しましたが、スクリプトタグ(各ビデオに1つ)を本文に挿入する必要があります。ビデオ。問題は、埋め込まれたJWPlayerファイルにdocument.write()ステートメントが含まれていることです。そして、ブラウザのコンソールには、"非同期的に読み込まれた外部スクリプトからのdocument.write()への呼び出しは無視されました。"

これを達成するにはどうすればよいですか?

+0

リンクされたアプローチに何が問題になりましたか?それは分かりやすいようです。 – Botje

答えて

0

動作するはずです、あなたが提供されたリンク。

JWPlayerを使用するには、スクリプトが読み込まれるまで待つだけで済みます。

const script = document.createElement('script') 

script.onload =() => { 
    // Now you can use JWPlayer in here 
} 

script.src = '//content.jwplatform.com/players/MEDIAID-PLAYERID.js' 
document.head.appendChild(script) 

またJWPlayerがロードされます以降だけその時点から、それを必要とする第一の成分のために、この1時間を行うことを確認してください、あなたは別のスクリプトタグを挿入せずにそれを使用することができます。

関連する問題