API YouTube не работает с устройством iPad/iPhone/non-Flash

Question

Этот фрагмент кода отлично работает в браузерах DESKTOP (код предоставлен с помощью @ Rob-W), щелкните миниатюру, и соседнее видео начнет воспроизводиться с использованием API YouTube.

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 на прошивкой - пользователь всегда начинает воспроизведение.»

Ограничение совместимо независимо от сетевого соединения, поскольку оно является решением как пропускной способности, так и решением пользователя.

Update, Октябрь, 2016: Стоит отметить, что в настоящее время IOS 10 выходит и получить значительную долю рынка, что люди могут использовать изменения в способе воспроизведения видео работает на прошивке 10, чтобы получить поведение автовоспроизведения. Если видео не имеет звуковых дорожек или тег отключен, возможно автовоспроизведение. Дополнительная информация доступна в this webkit blog. API YouTube может справиться с этим в ближайшее время.

Answer 2

Вы можете использовать YouTube iFrame API на iOS.

Answer 3

Начиная с iOS 4, UIWebView имеет свойство mediaPlaybackRequiresUserAction. Я не могу сказать, реализуете ли вы это в Интернете или в родном приложении, но при настройке на NO в родном приложении должно быть разрешено автоматическое воспроизведение.