YouTube API无法与iPad / iPhone /非Flash设备配合使用 [英] YouTube API not working with iPad / iPhone / non-Flash device
问题描述
这段代码在DESKTOP浏览器中很有效（代码由@ Rob-W提供），点击缩略图，相邻的视频将开始播放，使用YouTube的API。
This piece of code works great in DESKTOP browsers (code courtesy of @Rob-W), click the thumbnail and the adjacent video will start playing, using YouTube's API.
HTML
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
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);
})();
问题是它无法在iOS设备上播放（因为缺少Flash播放器，我想，它只是挂起）。
The problem is that it fails to play on iOS devices (because of the lack of Flash player, I think, it just hangs).
我可以通过再次点击视频强制它播放，这会提示它使用QuickTime播放。
I can force it to play by tapping the video once more, which prompts it to play using QuickTime.
但如何让它自动播放QuickTime？
But how do I get it to play with QuickTime automatically?
推荐答案
对不起要说这在iOS中是不可能的。根据 Apple的文档，
I'm sorry to say this is not possible in iOS. According to Apple's documentation,
...嵌入式媒体无法在iOS上的Safari中自动播放 -
用户始终启动播放。
"...embedded media cannot be played automatically in Safari on iOS - the user always initiates playback."
无论网络连接如何，限制都是一致的，因为它既是带宽决定，也是用户体验决策。
The restriction is consistent regardless of network connection as it is both a bandwidth decision as well as a user experience decision.
更新，2016年10月：值得注意的是，现在iOS 10已经出局并获得了显着的市场份额，人们可以利用视频播放在iOS上运行方式的变化10获得自动播放行为。如果视频没有音轨或标签静音，则可以进行自动播放。有关详细信息，请参见此webkit博客。 YouTube API很快就可以很好地解决这个问题。
Update, October, 2016: It's worth noting, now that iOS 10 is out and gaining significant market share, that people can leverage changes in the way video playback works on iOS 10 to get autoplay behavior. If the video has no audio tracks or the tag is muted, autoplay can be possible. More information is available in this webkit blog. The YouTube API may handle this nicely soon.
这篇关于YouTube API无法与iPad / iPhone /非Flash设备配合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
