YouTubeのapiイベントはAdobeムービーで起動しません

Question

クライアントは、次のページをクリックすると一時停止する4つの埋め込みYouTube動画を含むページを希望していますので、一度に再生できるのは1つだけです。十分に簡単に聞こえますよね？

問題は、ウェブサイト全体をAdobeのミューズにしておきたいのですが、jquery/jsコードを簡単に挿入できるウィジェットが見つかりました。私はthis fiddleの若干変更されたバージョンを使用しています。私はthread from 2014で非常に有望で安定して見えましたが、どういうわけか私のウェブサーバにページをアップロードするとうまくいきません。それはフィドルでも機能する。

var tag = document.createElement('script'); 
tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
console.log('api_inserted'); 

function onYouTubeIframeAPIReady() { 
    console.log('api_ready'); 
    var $ = jQuery; 
    var players = []; 
    $('iframe').filter(function() { 
     return this.src.indexOf('http://www.youtube.com/') === 0; 
    }).each(function(k, v) { 
     console.log('iframes'); 
     var src1 = $(this).attr('src'); 
     $(this).attr('src', src1 + "?enablejsapi=1"); 
     if (!this.id) { this.id='embeddedvideoiframe' + k; } 
     players.push(new YT.Player(this.id, { 
      events: { 
       'onStateChange': function(event) { 
        console.log('State_changed: ' + event.data); 
        if (event.data == YT.PlayerState.PLAYING) { 
         $.each(players, function(k, v) { 
          if (this.getIframe().id != event.target.getIframe().id) { 
           this.pauseVideo(); 
          } 
         }); 
        } 
       } 
      } 
     })); 
     console.log(players); 
    }); 
} 

私のコンソール出力は次のようになります。

api_inserted 
api_ready 
iframes 
[X] 
iframes 
[X, X] 
iframes 
[X, X, X] 
iframes 
[X, X, X, X] 

Answer 1

私は私の良き友人を尋ね、我々は問題を解決しました。

iframeには「enablejsapi = 1」が必要で、「？」を付けて追加しました。以前はが間違っていました。 "？"ビデオIDと他のすべてのプロパティが「&」で分割された後

正しいコードは次のとおり

var tag = document.createElement('script'); 
tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
console.log('api_inserted'); 

function onYouTubeIframeAPIReady() { 
    console.log('api_ready'); 
    var $ = jQuery; 
    var players = []; 
    $('iframe').filter(function() { 
     return this.src.indexOf('http://www.youtube.com/') === 0; 
    }).each(function(k, v) { 
     console.log('iframes'); 
     var src1 = $(this).attr('src'); 
     $(this).attr('src', src1 + "&enablejsapi=1"); 
     if (!this.id) { this.id='embeddedvideoiframe' + k; } 
     players.push(new YT.Player(this.id, { 
      events: { 
       'onStateChange': function(event) { 
        console.log('State_changed: ' + event.data); 
        if (event.data == YT.PlayerState.PLAYING) { 
         $.each(players, function(k, v) { 
          if (this.getIframe().id != event.target.getIframe().id) { 
           this.stopVideo(); 
          } 
         }); 
        } 
       } 
      } 
     })); 
     console.log(players); 
    }); 
}