javascript YouTube API 在 iOS (iPhone/iPad) 中不起作用，但在桌面浏览器中运行良好？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16513620/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
YouTube API not working in iOS (iPhone/iPad) but working fine in Desktop browsers?
提问by Matt
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.
我在一个简单的单页网站中使用 YouTube API。我能够播放视频，并且我的所有 YouTube 功能都可以在桌面浏览器中成功运行（IE 7 除外——也许这个问题会在您帮助我回答这个问题时得到解决），但它似乎不起作用在 iOS（iPhone 和 iPad）中根本没有。YouTube 播放器根本不显示，并且在 iOS 中根本没有 YouTube 功能的回忆。
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">
回答by Ronan Jouchet
According to this other SO post, limitations exist on iOS, where "...embedded media cannot be played automaticallyprogramatically in Safari on iOS - the user always initiates playback."
根据另一篇 SO 帖子，iOS 存在限制，其中“...无法在 iOS 上的 Safari 中以编程方式自动播放嵌入式媒体- 用户始终启动播放。”
I had the same problem and it turns out you canhave 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 onthe video, then with the native controls next to the video progress bar.
我遇到了同样的问题，结果证明您可以使用 YouTube 的红色大“播放”按钮正确嵌入和显示在 iOS 上的 YouTube-API IFrame，只是 iOS 不允许您使用自己的控件启动/停止视频和 JavaScript。例如，你可以下一个/上使用JavaScript，但不能播放/暂停，这必须通过单击来完成对视频的话，用旁边的视频进度条本机控制。
But regarding the last sentence of your first paragraph and putting aside these limitations, the YouTube player shouldshow, 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 播放器应该表明，您所做的事情有问题（尽管我不够专业，无法说明什么）。我也在一个简单的单页网站中这样做，请随意查看我所做的。
Hope that helps!
希望有帮助！
