2017-05-17 10 views
0

次のコードを使用して、自分のサイトのyoutubeクリップ用にiframe_apiを実装しました。youtube.com/iframe_apiはIE11またはWindows 10のEdgeで起動しません

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

// Setup Youtube player 
var player; 

// Get id of first clip 
var ytVideoId = jQuery('.start-yt').attr('data-video-id'); 

// When API is ready, create player with above id 
function onYouTubePlayerAPIReady() { 
    player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     videoId: ytVideoId, 
     events: { 
      'onReady': onPlayerReady 
     } 
    }); 
    console.log('API Ready'); 
} 

// When player is ready 
function onPlayerReady(event) { 
    jQuery('.start-yt').addClass('play-icon'); 

    // Set glob var 
    var ytGlobId =""; 

    // Close button 
    jQuery('.ytClose').click(function(){ 
     jQuery('.youtube-player-container').removeClass('active'); 
     player.pauseVideo(); 
    }); 

    jQuery('.youtube-player-container').click(function(){ 
     jQuery('.youtube-player-container').removeClass('active'); 
     player.pauseVideo(); 
    }); 

    // load or play clip 
    jQuery('.start-yt').click(function(){ 
     jQuery('.youtube-player-container').addClass('active'); 

     if (ytGlobId == jQuery(this).attr('data-video-id')) { 
      player.playVideo(); 
     } else { 
      ytGlobId = jQuery(this).attr('data-video-id'); 
      player.loadVideoById(ytGlobId); 
     } 
    }); 

    console.log('Player Ready'); 
} 

この作品。しかし、友人はWindows 10とIE11 + Edgeを持っています。そして、それは'onReady': onPlayerReadyがそこで発火しないようです。 console.logAPI Readyを書きますが、確認した場合はPlayer Readyではありません。それはコンソールに何のエラーも与えません、それだけで発射しないと動作します。私はBrowserstackを同じ組み合わせ(Windows 10 + IE11/Edge)でチェックしていますが、動作するようです。

私はグーグルで回答を探しましたが、同様の問題を抱えている人もいますが、解決策を見つけるのに十分な例は見つかりませんでした。

答えて

0

このthreadに記載されているとおり、IFrame APIには一時的な問題があります。このlinkで読むことができるiFrame Player API(2013年6月に修正されました)に一時的な問題がありました。一時的な修正として

、あなただけonReadyイベント内でイベントリスナーを追加する必要があります:Youtube Iframe API not working in Internet Explorer (11)

+0

ありがとう@abielita:

function onReady() { player.addEventListener('onStateChange', function(e) { console.log('State is:', e.data); }); } 

ここにも役立つかもしれない別のスレッドがあります。試してみたが、うまくいかなかった。 – JoakimB

+0

私がする必要があるのは、console.logメッセージだけでそのイベントリスナーを呼び出すことです。 「https://www.youtube.com」の提供元が受信者のウィンドウの元(「https://www.youtube.com」)と一致していないため、「DOMWindow」の「postMessage」を実行できませんでした。 /dev3.axiell.com ')。 '、しかしプレーヤーは働いています。 Edge/IE11ではまだ違いはありませんが、それでも失敗します。私はイベントリスナー内に自分の機能を配置しようとしましたが、それはすべてのブラウザにプレーヤーをクラッシュさせました。 – JoakimB

+0

同じことについて多くの分割されたコメントを残念に思っています。私が見ているように、問題は 'onReady()'関数がまったく呼び出されないということです。したがって、eventlistnerをその中に置くことは、Win10 + Edge/IE11で 'onReady()'が決して起動しないため、違いはありません。 – JoakimB

関連する問題