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)

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

1 个答案: