我已经使用以下代码为我网站上的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,并且它似乎在工作。
我搜索谷歌的答案,似乎有些人有类似的问题,但我没有找到足够的例子来找到解决方案。
答案 0 :(得分:0)
正如此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)