YouTube API无法在iOS（iPhone / iPad）中运行，但在桌面浏览器中运行良好？ [英] YouTube API not working in iOS (iPhone/iPad) but working fine in Desktop browsers?
问题描述
我在简单的单页网站中使用YouTube API。我能够播放视频，我的所有YouTube功能都可以在桌面浏览器中成功运行（IE 7除外 - 也许这个问题会在你帮我回答这个问题时得到解决）但它似乎不起作用完全适用于iOS（iPhone和iPad）.YouTube播放器根本无法显示，并且在iOS中根本没有关于YouTube功能的回忆。
I am using the YouTube API in a simple one page website. I am able to get videos to play and all of my YouTube functionality works successfully in Desktop browsers (with the exception of IE 7 -- perhaps this issue will be addressed in you helping me answer this question) but it doesn't seem to work at all in iOS (iPhone and iPad.) The YouTube player simply does not show and there are no reminiscences of YouTube functionality at all in iOS.
以下是我的代码实现。如果我没有提供任何可能对此问题有帮助的问题信息，请告诉我。我想尽可能简单地解决这个问题，然后在必要时引入其他信息。
Below is my code implementation. If there's any question information I did not provide that would be helpful for this question, please let me know. I want to start as simple as possible in addressing this issue and then bring in additional information if necessary.
/*==========================================================================
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上存在限制，其中.. .imbedded媒体无法在iOS上的Safari中以编程方式自动播放 - 用户始终启动播放。
According to this other SO post, limitations exist on iOS, where "...embedded media cannot be played automatically programatically in Safari on iOS - the user always initiates playback."
我有同样的问题，事实证明你可以正确嵌入YouTube-API IFrame并在iOS上显示YouTube的大红色播放按钮，这只是iOS不会让你开始/停止视频你自己的控制和JavaScript的。例如。您可以使用JavaScript进行下一个/上一个，但无法播放/暂停，必须通过单击上的视频，然后使用视频进度条旁边的本机控件来完成。
I had the same problem and it turns out you can have a YouTube-API IFrame properly embedded and shown on iOS with YouTube's big red "Play" button, it's just that iOS won't let you start/stop the video with your own controls & JavaScript. E.g. you can next/previous with JavaScript, but you cannot play/pause, which has to be done by clicking on the video, then with the native controls next to the video progress bar.
但是关于你的第一段的最后一句并且放弃这些限制，YouTube播放器应显示，你所做的事情有问题（虽然我'我不够专家告诉你什么）。我也在一个简单的单页网站中这样做，随时看看我做了什么。
But regarding the last sentence of your first paragraph and putting aside these limitations, the YouTube player should show, there is something wrong in what you did (though I'm not expert enough to tell what). I am also doing that in a simple one-page website, feel free to have a look at what I did.
希望有所帮助！
这篇关于YouTube API无法在iOS（iPhone / iPad）中运行，但在桌面浏览器中运行良好？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
