1

私は YouTube API プレーヤーを使用する初心者です。

YouTube の API で動作するようにchrome 拡張機能を構築しています。プレーヤーを使用するために、これを行うメソッドを作成しました。

popup.js :

   jQuery(document).ready(function()

    {    

   Player();
    });

 // Creating the player
 function Player(){
   var tag = document.createElement('script');
   tag.src = "//www.youtube.com/iframe_api";
   var firstScriptTag = document.getElementsByTagName('script')[0];
   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);  
 }


 function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '1',
      width: '1',
      playerVars: {
                showinfo: '0',        
                controls: '0',
                autohide: '1',
                enablejsapi:'1',
                origin:"http://localhost/myapp"
        },
         events: {
        'onReady': IframeReady,
        'onStateChange': StateChange
        }
         });    
      }


      function IframeReady(event) {

player.addEventListener("onStateChange", "StateChange");
player.addEventListener("onError", "PlayerError");
player.setPlaybackQuality('hd720');
gettingInfo();
              }


 I get the music information (playlits) by using a search function, something like this:


    httpReq.open("GET","https://gdata.youtube.com/feeds/api/videos/-/Music/?v=2&alt=json&orderby="+"relevance"+"&start-index="+"1"+"&max-results="+"10"+"&q="+query);

前述の機能は完璧に機能します!プレイリストをすべて取得しました。問題は、ビデオ アクション (プレイリスト) を再生しようとすると、プレーヤーが動作しないように見えることです。

Chrome 拡張機能の Inspect 関数を使用すると、次の警告が表示されました。

リソース chrome-extension://www.youtube.com/iframe_api を読み込めませんでした

次のことを行って、この問題を修正しようとしました。

  1. これをマニフェストファイルに置くことにより:

      "content_security_policy": 
       "script-src 'self' 'unsafe-eval'; https://www.youtube.com/player_api https://s.ytimg.com/yts/jsbin/www-widgetapi-vfljlXsRD.js; object-src 'self'"
    
  2. これをpopup.htmlに置くことで:

        <script type="text/javascript" src="//www.youtube.com/iframe_api"></script>
    

この問題を解決するにはどうすればよいですか。

どうもありがとうございました。

4

0 に答える 0