这段代码在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？
很抱歉，这在iOS中是不可能的。根据苹果的文件，
"…嵌入式媒体无法在iOS上的Safari中自动播放-用户总是启动播放。"
无论网络连接如何，限制都是一致的，因为这既是带宽决定，也是用户体验决定。
更新，2016年10月：值得注意的是，现在iOS 10已经推出并获得了巨大的市场份额，人们可以利用iOS 10上视频播放方式的变化来获得自动播放行为。如果视频没有音轨或标签静音，则可以进行自动播放。有关更多信息，请访问此webkit博客。YouTube API可能很快就能很好地处理这一问题。
从iOS4开始，UIWebView具有mediaPlaybackRequiresUserAction属性。我不知道你是在网络上还是在本机应用程序中实现这一点，但在本机的应用程序中将其设置为NO应该允许自动播放。
您可以在iOS上使用YouTube iFrame API。