jquery - youtube.com/iframe_api不会在Windows 10的IE11或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');
}

这有效。但是 friend 有Windows 10和IE11 + Edge。似乎 'onReady': onPlayerReady不在此处触发。当我们检查时， console.log确实写 API Ready而不是 Player Ready。它不会在控制台中显示任何错误，只是不会启动并起作用。我已经使用相同的组合(Windows 10 + IE11 / Edge)在Browserstack中 checkin ，似乎可以使用。

我已经在google上搜索了答案，似乎有些人也遇到了类似的问题，但是我没有找到足以找到解决方案的示例。

Answer 1

如thread所述，IFrame API暂时存在问题。您可以在link中阅读有关iFrame Player API(已于2013年6月修复)的临时问题。

作为临时解决方案，您只需要在onReady事件中添加事件侦听器:

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

这是另一个可能也有帮助的线程: Youtube Iframe API not working in Internet Explorer (11)