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应该可以让自动播放起作用。