youtube.com/iframe_api 不会在 IE11 或 Windows 10 的 Edge 中触发

Question

我已经使用以下代码在我的网站上为 youtube 剪辑实现了 iframe_api。

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.log 写API Ready 但不是Player Ready 当我们检查过。它在控制台中没有给出错误，它只是不会触发并且可以工作。我已经使用相同的组合（Windows 10 + IE11/Edge）签入了 Browserstack，它似乎可以工作。

我已经在谷歌上搜索过答案，似乎有些人遇到过类似的问题，但我没有找到足够准确的示例来找到解决方案。

Answer 1

正如thread 中所述，IFrame API 存在临时问题。 iFrame Player API 存在一个临时问题（已于 2013 年 6 月修复），您可以在此link 中阅读。

作为临时修复，您只需在 onReady 事件中添加事件侦听器：

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

这是另一个可能也有帮助的帖子：Youtube Iframe API not working in Internet Explorer (11)