javascript - YouTube API not working in iOS (iPhone/iPad) but working fine in Desktop browsers? -
i using youtube api in simple 1 page website. able videos play , of youtube functionality works in desktop browsers (with exception of ie 7 -- perhaps issue addressed in helping me answer question) doesn't seem work @ in ios (iphone , ipad.) youtube player not show , there no reminiscences of youtube functionality @ in ios.
below code implementation. if there's question information did not provide helpful question, please let me know. want start simple possible in addressing issue , bring in additional information if necessary.
/*========================================================================== youtube ========================================================================== */ var tag = document.createelement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstscripttag = document.getelementsbytagname('script')[0]; firstscripttag.parentnode.insertbefore(tag, firstscripttag); var ytready = false, playeridlist = [], ytplayers = {}; // when youtube api ready, switch ytready true , run queue of videos should exist // , run list of page-specified functions such carousel setups var ytreadyfunctions = {}; function onyoutubeiframeapiready() { console.log('yt ready'); ytready = true; if (playeridlist.length > 0) { runyoutubeiframelist(playeridlist); } for(id in ytreadyfunctions){ var thisfunc = ytreadyfunctions[id]; var thisargs = thisfunc.args; thisfunc.func(thisargs.id,thisargs.counters,thisargs.ishome,thisargs.isautorot,thisargs.gallerytype); } } function shortid(elemid){ return elemid.split('-').join(''); } function initializeyoutubeiframe(playerid,params){ //var playerid = thislist[x]; var thisplayer = document.getelementbyid(playerid); ytplayers[shortid(playerid)] = new yt.player(playerid, { width: thisplayer.getattribute('width'), height: thisplayer.getattribute('height'), playervars: { autohide: 1, //autoplay: 1, theme: 'light', showinfo: 0, color: 'white', rel: 0, origin: document.location.hostname, wmode: 'transparent' }, videoid: playerid, events: { 'onready': onplayerready, 'onstatechange': onplayerstatechange } }); } function runyoutubeiframelist(thislist) { // if youtube iframe api (onyoutubeiframeapiready not ready yet, // add player(s) list (playeridlist) wait until api ready , initialize if (!ytready) { playeridlist.concat(thislist); } else { // yt api ready. initialize list of player iframes. var thislistlength = thislist.length; (var x = 0; x < thislistlength; x++) { initializeyoutubeiframe(thislist[x]); } } } function onplayerready(event) { //alert('player ready'); } function onplayerstatechange(event) { //alert('state changed: ' + event.data); if (event.data == 3) { $('.loading').remove(); } if (event.data == 1) { $('#i360-static-panel').css('display','none'); $('.loading').remove(); $('div#i360-questions > h2').fadein(500).removeclass('transparent'); } if (event.data == 0) { $('#i360-answer-mask').slideup(function () { $('p.active-answer').remove(); $('div#i360-questions > ul').fadein(500).removeclass('transparent'); $('div#i360-questions > ul > li').removeclass('i360-clicked-question'); }); $('.i360-shown').fadeout(300); $(event.target.a.parentnode).children('#i360-static-panel').css('display','block'); } } // run through yt-players , add id list of to-be-initialized players $('.yt-player').each(function(i){ playeridlist.push($(this).attr('id')); }); runyoutubeiframelist(playeridlist); function setvideocarouselthumb(response,element){ if(response.data){ if(response.data.thumbnail.hqdefault){ element.getelementsbytagname('img')[0].src = response.data.thumbnail.hqdefault; } else if(response.data.thumbnail.sqdefault){ element.getelementsbytagname('img')[0].src = response.data.thumbnail.sqdefault; } } else if (response.status){ if(response.status == '403'){ element.setattribute('class',element.getattribute('class') ? element.getattribute('class') + ' private' : 'private'); } } } function getyoutubeinfobyid(type,getid,callback,args){ //window.console && console.log('function: getyoutubeinfobyid | type = ',type,' | getid = ',getid,' | args = ',args); //consolethis('https://gdata.youtube.com/feeds/api/' + type + '/' + getid + '?v=2&prettyprint=true&alt=jsonc'); $.ajax({ url: 'https://gdata.youtube.com/feeds/api/' + type + '/' + getid + '?v=2&prettyprint=true&alt=jsonc', datatype: 'jsonp', context: args ? args : '', success: function(response){ callback(response,this); }, error: function(response){ callback(response,this); //consolethis(response); } }); } // end youtube </script> <meta name="apple-mobile-web-app-title" content="roundup" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="roundup" /> <meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0">
according this other post, limitations exist on ios, "...embedded media cannot played automatically programatically in safari on ios - user initiates playback."
i had same problem , turns out can have youtube-api iframe embedded , shown on ios youtube's big red "play" button, it's ios won't let start/stop video own controls & javascript. e.g. can next/previous javascript, cannot play/pause, has done clicking on video, native controls next video progress bar.
but regarding last sentence of first paragraph , putting aside these limitations, youtube player should show, there wrong in did (though i'm not expert enough tell what). doing in a simple one-page website, feel free have @ did.
hope helps!
Comments
Post a Comment