YouTube API不能在iOS(iPhone / iPad)上工作,但在桌面浏览器中正常工作?

我在简单的一个网页上使用YouTube API。 我能够播放video,并且我所有的YouTubefunction都可以在桌面浏览器中成功运行(IE7除外 – 也许这个问题将在您帮助我回答这个问题中解决),但似乎并不奏效完全可以在iOS(iPhone和iPad)上使用.YouTube播放器根本不会显示,并且在iOS中完全没有YouTubefunction的提示。

以下是我的代码实现。 如果有任何问题的信息我没有提供,这将有助于这个问题,请让我知道。 我想在解决这个问题时尽可能简单地开始,然后在必要时提供更多的信息。

/*========================================================================== 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"> 

根据这个其他SOpost ,iOS上存在一些限制, “…embedded式媒体不能在iOS上的Safari中以编程方式自动播放 – 用户总是启动播放”。

我遇到了同样的问题,事实certificate,您可以在YouTube上正确embeddedYouTube-API IFrame并在YouTube上显示大红色的“播放”button,只是iOS不会让您用自己的控件启动/停止video&JavaScript。 例如,您可以使用JavaScript下一个/上一个,但不能播放/暂停,必须通过点击video,然后使用video进度条旁边的本机控件来完成。

但是关于第一段的最后一句话,并且抛开这些限制,YouTube播放器应该显示,你所做的事情有问题(虽然我不够专业,不知道是什么)。 我也在一个简单的单页网站上做这个,随时看看我做了什么。

希望有所帮助!