如何修复“如果播放没有立即开始，请尝试重新启动设备”在iPad上使用Youtube iFrame API？ [英] How to fix "If playback doesn't begin shortly, try restarting your device" using Youtube iFrame API on iPad?
问题描述
我创建了一个小的YouTube流媒体脚本，随机播放YouTube音乐视频或从队列中播放。它在本周工作正常，直到本周，它似乎不想在使用iPad / iPhone时加载视频。我收到以下错误：
I've created a little YouTube streaming script which randomly plays YouTube music videos or from a queue. It's worked fine for months up until this week in which it doesn't seem to want to load the videos when using an iPad/iPhone. I get the following error instead:
如果播放没有立即开始，请尝试重新启动设备
If playback doesn't begin shortly, try restarting your device
我尝试了什么：
我尝试过Safari，Chrome， Firefox和Opera都出错了。我已经尝试清除网站数据/缓存，重新启动设备，重新启动设备。什么都行不通。奇怪的是，它在Windows桌面上运行得非常好，这使我相信它不是代码中的错误，而是通过API或Safari改变的东西。我的代码最近没有被编辑，这可能导致它停止工作。
I've tried Safari, Chrome, Firefox and Opera and they all error. I've tried clearing website data/cache, restarting the device, fulling restarting the device. Nothing works. The weird thing is, it works absolutely fine on a Windows desktop which leads me to believe it's not an error in the code, but something that has either changed with the API or with Safari. My code has not been edited recently either which could have caused it to stop working.
我尝试使用jsconsole.com调试它，没有任何可疑的弹出。在某些情况下，播放器将加载，视频的标题将显示，图像也将显示，但在大约30秒后，上面的错误将与加载微调器一起显示。
I've tried debugging it using jsconsole.com, nothing suspicious pops up. In some cases, the player will load, the title of the video will display and so will the image, but after about 30 seconds, the error above displays along with the loading spinner.
我知道playVideo（）;在iOS设备上不起作用（自动播放）。这很好，再一次，脚本以前工作过，我只需要在第一个视频上按下播放。但现在，似乎iOS正试图自动播放视频。所以，我也通过删除playVideo（）调用进行了测试，问题仍然存在。
I'm aware that playVideo(); doesn't work (autoplay) on iOS devices. This is fine, and again, the script has worked previously, i've only had to press play on the first video. But now, it seems like iOS is trying to auto-play the video. So, I've also tested by removing the playVideo() calls, problem still persists.
在iPad 2，iPad mini和iPhone 4上测试过（全部都是最新的iOS）在设备上可用，所有工作都在以前工作）。
Tested on iPad 2, iPad mini and iPhone 4 (all with the latest iOS available on the device and all worked previously).
我不知所措，试图在周末之前为家庭聚会修好:)所以我很感激任何帮助或暗示可能是什么导致iOS失败。
I'm at a loss and trying to get this fixed before the weekend for a house party :) So I'd appreciate any help or hints as to what might be causing the failure on iOS.
以下是javascript代码：
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
check_queue_timer = setTimeout(check_queue(),3000);
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data === 0) {
// TRACK AS DONE, REFRESH QUEUE AND GET NEXT SONG
// POST TO WRITE TO FILE
$.ajax({
type: 'POST',
url: site_url+'ajax_next_track',
dataType: 'json',
data: 'queue_id='+$('#queue_id').val(),
cache: false,
success:
function(data){
if(data.status == 'success'){
$("#queue_table").empty();
if(data.queue.length == 0){
check_queue_timer = setTimeout(check_queue(),3000);
}
$.each(data.queue, function(i, item) {
if(i == 0){
event.target.loadVideoById(item.video_id);
event.target.playVideo();
$('#queue_id').val(item.queue_id);
}
$('#queue_table').append('<tr><td>'+item.title+'</td></tr>');
});
}
else{
console(data.message);
}
},
error:
function( jqXHR, textStatus, errorThrown ){
$('#error_msg').html('Something broke.').fadeIn();
}
});
}
}
function stopVideo() {
player.stopVideo();
}
function check_queue(){
$.ajax({
type: 'POST',
url: site_url+'ajax_next_track',
dataType: 'json',
data: 'no_delete=1',
cache: false,
success:
function(data){
if(data.status == 'success'){
$("#queue_table").empty();
if(data.queue.length == 0){
clearTimeout(check_queue_timer);
check_queue_timer = setTimeout(check_queue(),3000);
}
$.each(data.queue, function(i, item) {
if(i == 0){
player.loadVideoById(item.video_id);
player.playVideo();
$('#queue_id').val(item.queue_id);
clearTimeout(check_queue_timer);
}
$('#queue_table').append('<tr><td>'+item.title+'</td></tr>');
});
}
else{
console(data.message);
}
},
error:
function( jqXHR, textStatus, errorThrown ){
$('#error_msg').html('Something broke.').fadeIn();
}
});
}
更新1（2015年11月25日）
我决定从头开始使用 https上的示例代码： //developers.google.com/youtube/iframe_api_reference 。似乎loadVideoById（）不再适用于iPad。它在此之前。如果我不包含loadVideoById（）或playVideo（），它就可以工作。理想情况下，我希望它能与loadVideoById（）一起使用。
I've decided to start from scratch and work with the example code on https://developers.google.com/youtube/iframe_api_reference . It seems that loadVideoById() is no longer working on iPads. It was before. If I don't include the loadVideoById() or playVideo() it works. Ideally, i'd like it to work with loadVideoById().
推荐答案
我已经在电脑上撞了几个小时试图解决这个...这就是我发现的。
I've banged my head against the computer for hours trying to solve this one... Here's what I've found.
这是因为苹果公司严苛的iOS限制：网页只能开始播放音频/视频直接回应用户反馈。 （请注意，此限制仅影响第一次时间在一个页面上播放音频/视频。）
This is happening because of Apple's draconian iOS limitation: web pages can only start playing audio/video when responding directly to user feedback. (Note this limitation only affects the first time audio/video is played on a page.)
通常，要解决Apple的限制，它是足以确保您的play（）调用直接在事件处理程序中发生（例如，单击处理程序）。这适用于Web Audio API和普通的HTML5视频 - 但有关YouTube播放器的内容无法阻止其在YouTube上工作。
Usually, to work around Apple's limitation, it's sufficient to make sure your play() call happens directly in an event handler (e.g., a click handler). This works for the Web Audio API and normal HTML5 videos -- but something about the YouTube player prevents this from working for YouTube.
因此，YouTube的解决方案显然是要求用户单击YouTube视频本身以启动播放。从那时起，您可以使用YouTube iframe API（播放，暂停，搜索等）来控制它。但是，在用户点击视频之后，您无法使用API控制YouTube视频。
As a result, the solution for YouTube apparently is to require the user to click the YouTube video itself to initiate playback. From then on, you can control it using the YouTube iframe API (play, pause, seek, etc.). But you cannot control the YouTube video using the API until after the user has clicked the video.
为了获得万无一失的用户体验，您可以隐藏所有播放器控制用户界面，并告诉用户点击YouTube视频本身即可开始播放。然后，一旦用户点击了一次视频，就可以激活你的用户界面。当然，您应该将其设计为仅适用于iOS。
For a foolproof user experience, you can hide all of your player-controlling UI and tell users to click the YouTube video itself to start playback. Then, once, the user has clicked the video once, you can activate your UI. Of course, you should design this only to apply to iOS.
感谢头痛，Apple！
Thanks for the headaches, Apple!
这篇关于如何修复“如果播放没有立即开始，请尝试重新启动设备”在iPad上使用Youtube iFrame API？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
