YouTube API不適用於iOS（iPhone/iPad），但在桌面瀏覽器中正常工作？

Question

我在簡單的單頁網站中使用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"> 

Answer 1

據this other SO post，限制在iOS上，其中存在「...嵌入式媒體不能自動編程的Safari在iOS上發揮 - 用戶總是啓動播放。」

我有同樣的問題，事實證明你可以有YouTube-API的iframe中正確嵌入，並與YouTube的大紅色「播放」按鈕，在iOS上顯示，它只是iOS版不會讓你啓動/用你自己的控件停止視頻& JavaScript。例如。您可以使用JavaScript下一個/上一個，但無法播放/暫停，必須通過點擊上的視頻，然後使用視頻進度條旁邊的本機控件來完成。

但是關於第一段的最後一句話，並且拋開這些限制，YouTube播放器應該顯示，你做了什麼事情（儘管我沒有足夠的專業知識）。我也在a simple one-page website這樣做，請隨時查看我的工作。

希望有幫助！