YouTube API不支持iPad/iPhone /非Flash設備

Question

這段代碼在DESKTOP瀏覽器（代碼由@ Rob-W提供）中很棒，點擊縮略圖，相鄰視頻將使用YouTube的API開始播放。

HTML

<div id="tabs2"> 
    <div> 
    <img class='thumb' src='http://i2.cdnds.net/11/34/odd_alan_partridge_bio_cover.jpg'> 
    <iframe id="frame1" width="640" height="390" frameborder="0" title="YouTube video player"type="text/html"src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe> 
    </div> 

    <div> 
     <img class='thumb' src='http://i2.cdnds.net/11/34/odd_alan_partridge_bio_cover.jpg'> 
    <iframe id="frame2" width="640" height="390" frameborder="0" title="YouTube video player"type="text/html"src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe> 
    </div> 
</div> 

CSS

#tabs2 div { 
    position: relative; 
} 
/* For security reasons, an element cannor be placed over a frame */ 
/*.thumb { 
    position: absolute; 
}*/  
.play { 
    border: 3px solid red; 
} 

JS

function getFrameID(id) { 
    var elem = document.getElementById(id); 
    if (elem) { 
     if (/^iframe$/i.test(elem.tagName)) return id; //Frame, OK 
     // else: Look for frame 
     var elems = elem.getElementsByTagName("iframe"); 
     if (!elems.length) return null; //No iframe found, FAILURE 
     for (var i = 0; i < elems.length; i++) { 
      if (/^https?:\/\/(?:www\.)?youtube(?:-nocookie)?\.com(\/|$)/i.test(elems[i].src)) break; 
     } 
     elem = elems[i]; //The only, or the best iFrame 
     if (elem.id) return elem.id; //Existing ID, return it 
     // else: Create a new ID 
     do { //Keep postfixing `-frame` until the ID is unique 
      id += "-frame"; 
     } while (document.getElementById(id)); 
     elem.id = id; 
     return id; 
    } 
    // If no element, return null. 
    return null; 
} 

// Define YT_ready function. 
var YT_ready = (function() { 
    var onReady_funcs = [], 
     api_isReady = false; 
/* @param func function  Function to execute on ready 
     * @param func Boolean  If true, all qeued functions are executed 
     * @param b_before Boolean If true, the func will added to the first 
            position in the queue*/ 
    return function(func, b_before) { 
     if (func === true) { 
      api_isReady = true; 
      for (var i = 0; i < onReady_funcs.length; i++) { 
       // Removes the first func from the array, and execute func 
       onReady_funcs.shift()(); 
      } 
     } 
     else if (typeof func == "function") { 
      if (api_isReady) func(); 
      else onReady_funcs[b_before ? "unshift" : "push"](func); 
     } 
    } 
})(); 
// This function will be called when the API is fully loaded 

function onYouTubePlayerAPIReady() { 
    YT_ready(true) 
} 

var players = {}; 
//Define a player storage object, to enable later function calls, 
// without having to create a new class instance again. 
YT_ready(function() { 
    $(".thumb + iframe[id]").each(function() { 
     var identifier = this.id; 
     var frameID = getFrameID(identifier); 
     if (frameID) { //If the frame exists 
      players[frameID] = new YT.Player(frameID, { 
       events: { 
        "onReady": createYTEvent(frameID, identifier) 
       } 
      }); 
     } 
    }); 
}); 

// Returns a function to enable multiple events 
function createYTEvent(frameID, identifier) { 
    return function (event) { 
     var player = players[frameID]; // player object 
     var the_div = $('#'+identifier).parent(); 
     the_div.children('.thumb').click(function() { 
      var $this = $(this); 
      $this.fadeOut().next().addClass('play'); 
      if ($this.next().hasClass('play')) { 
       player.playVideo(); 
      } 
     }); 
    } 
} 
// Load YouTube Frame API 
(function(){ //Closure, to not leak to the scope 
    var s = document.createElement("script"); 
    s.src = "http://www.youtube.com/player_api"; /* Load Player API*/ 
    var before = document.getElementsByTagName("script")[0]; 
    before.parentNode.insertBefore(s, before); 
})(); 

JSFiddle

問題是，它無法在iOS設備上播放（因爲缺乏Flash播放器，我認爲它只是掛起）。

我可以通過再次點擊視頻來強制播放它，這會提示它使用QuickTime進行播放。

但是，如何讓它自動使用QuickTime播放？

Answer 1

我很抱歉地說這在iOS中不可行。據Apple's documentation，

「......嵌入的媒體不能自動在Safari上播放的iOS - 在 用戶總是啓動播放。」

無論網絡連接如何，限制都是一致的，因爲它既是帶寬決策，也是用戶體驗決策。

2016年10月更新：值得注意的是，現在iOS 10已經出來並獲得了巨大的市場份額，人們可以利用iOS 10上視頻播放的方式改變自動播放行爲。如果視頻沒有音軌或標籤被靜音，則可以自動播放。更多信息請見this webkit blog。 YouTube API可能會很快處理這個問題。

Answer 2

您可以在iOS上使用YouTube iFrame API。

Answer 3

從iOS 4開始，UIWebView擁有mediaPlaybackRequiresUserAction屬性。我無法確定您是在Web上還是在本機應用中實現此功能，但在本地應用中將其設置爲NO應該可以讓自動播放起作用。