我在一个简单的一页网站上使用YouTube API。我可以播放视频，我的所有YouTube功能都可以在桌面浏览器上正常运行(除了IE 7——也许这个问题会在你帮我回答这个问题时得到解决)，但它似乎在iOS (iPhone和iPad)上根本不起作用。YouTube播放器根本没有出现，iOS中根本没有YouTube功能的影子。
下面是我的代码实现。如果有任何我没有提供的问题信息对这个问题有帮助，请告诉我。我想以尽可能简单的方式开始解决这个问题，然后在必要时引入额外的信息。
/*==========================================================================
YOUTUBE
========================================================================== */
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var YTready = false,
playerIdList = [],
ytPlayers = {};
// When YouTube API is ready, switch YTready to true and run the queue of videos should any exist
// and run a list of page-specified functions such as carousel setups
var YTreadyFunctions = {};
function onYouTubeIframeAPIReady() {
console.log('YT Ready');
YTready = true;
if (playerIdList.length > 0) {
runYouTubeIframeList(playerIdList);
}
for(id in YTreadyFunctions){
var thisFunc = YTreadyFunctions[id];
var thisArgs = thisFunc.args;
thisFunc.func(thisArgs.id,thisArgs.counters,thisArgs.isHome,thisArgs.isAutoRot,thisArgs.galleryType);
}
}
function shortID(elemId){
return elemId.split('-').join('');
}
function initializeYouTubeIframe(playerId,params){
//var playerId = thisList[x];
var thisPlayer = document.getElementById(playerId);
ytPlayers[shortID(playerId)] = new YT.Player(playerId, {
width: thisPlayer.getAttribute('width'),
height: thisPlayer.getAttribute('height'),
playerVars: {
autohide: 1,
//autoplay: 1,
theme: 'light',
showinfo: 0,
color: 'white',
rel: 0,
origin: document.location.hostname,
wmode: 'transparent'
},
videoId: playerId,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function runYouTubeIframeList(thisList) {
// If the YouTube iFrame API (onYouTubeIframeAPIReady is not ready yet,
// add the player(s) to a list (playerIdList) to wait until the API is ready and then initialize
if (!YTready) {
playerIdList.concat(thisList);
} else {
// YT API is ready. Initialize the list of player iframes.
var thisListLength = thisList.length;
for (var x = 0; x < thisListLength; x++) {
initializeYouTubeIframe(thisList[x]);
}
}
}
function onPlayerReady(event) {
//alert('player ready');
}
function onPlayerStateChange(event) {
//alert('state changed: ' + event.data);
if (event.data == 3) {
$('.loading').remove();
}
if (event.data == 1) {
$('#i360-static-panel').css('display','none');
$('.loading').remove();
$('div#i360-questions > h2').fadeIn(500).removeClass('transparent');
}
if (event.data == 0) {
$('#i360-answer-mask').slideUp(function () {
$('p.active-answer').remove();
$('div#i360-questions > ul').fadeIn(500).removeClass('transparent');
$('div#i360-questions > ul > li').removeClass('i360-clicked-question');
});
$('.i360-shown').fadeOut(300);
$(event.target.a.parentNode).children('#i360-static-panel').css('display','block');
}
}
// run through all yt-players and add their ID to a list of to-be-initialized players
$('.yt-player').each(function(i){
playerIdList.push($(this).attr('id'));
});
runYouTubeIframeList(playerIdList);
function setVideoCarouselThumb(response,element){
if(response.data){
if(response.data.thumbnail.hqDefault){
element.getElementsByTagName('img')[0].src = response.data.thumbnail.hqDefault;
} else if(response.data.thumbnail.sqDefault){
element.getElementsByTagName('img')[0].src = response.data.thumbnail.sqDefault;
}
} else if (response.status){
if(response.status == '403'){
element.setAttribute('class',element.getAttribute('class') ? element.getAttribute('class') + ' private' : 'private');
}
}
}
function getYouTubeInfoById(type,getID,callback,args){
//window.console && console.log('function: getYouTubeInfoById | type = ',type,' | getId = ',getID,' | args = ',args);
//consoleThis('https://gdata.youtube.com/feeds/api/' + type + '/' + getID + '?v=2&prettyprint=true&alt=jsonc');
$.ajax({
url: 'https://gdata.youtube.com/feeds/api/' + type + '/' + getID + '?v=2&prettyprint=true&alt=jsonc',
dataType: 'jsonp',
context: args ? args : '',
success: function(response){
callback(response,this);
},
error: function(response){
callback(response,this);
//consoleThis(response);
}
});
}
// END YOUTUBE
</script>
<meta name="apple-mobile-web-app-title" content="Roundup" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Roundup" />
<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0">
根据另一篇SO帖子，iOS存在限制，其中"…嵌入式媒体不能在iOS上的Safari中以编程方式自动播放 -用户总是启动播放。"
我有同样的问题，事实证明你可以有一个YouTube- api IFrame正确嵌入和显示在iOS与YouTube的大红色"播放"按钮，这只是iOS不会让你开始/停止视频与你自己的控制& &;JavaScript。例如，你可以使用JavaScript执行下一步/上一步，但你不能播放/暂停，这必须通过点击视频上的，然后使用视频进度条旁边的本机控件来完成。
但是关于你第一段的最后一句话，抛开这些限制，YouTube播放器应该显示，你所做的事情有问题(尽管我不够专业，不能告诉你是什么)。我也在一个简单的单页网站上这样做，你可以随意看看我做了什么。
希望有帮助!