youtube javascript api - Waiting for both YouTubePlayerAPI and JQuery Document to be ready -


i seem have race condition in code. loading youtube player api asynchronously via:

  <script>     var tag = document.createelement('script');     tag.src = "https://www.youtube.com/player_api";     var firstscripttag = document.getelementsbytagname('script')[0];     firstscripttag.parentnode.insertbefore(tag, firstscripttag);   </script>

and using coffeescript have:

$ ->   window.onyoutubeplayerapiready = () ->     #use youtube player api

sometimes onyoutubeplayerapiready() method fires before jquery document ready method , in case none of youtube player code runs. have experience or suggestions handling this?

edit: based on feedback (including example code) op (@wuliwong) following solution resolves race condition original hinted @ in op's question:

$(document).bind 'custom-ready', () ->       ... custom initialization code ...   # ensure 'custom-ready' called when both document ,  # youtube player api ready. order occur in not  # guarenteed following code caters both scenarios.  # cater document ready first scenario $ ->      window.onyoutubeplayerapiready = () ->          $(document).trigger('custom-ready')   # cater youtube player api ready first scenario window.onyoutubeplayerapiready = () ->      $ ->          $(document).trigger('custom-ready')

my original answer (for context):

i've had appeared same issue in past different setup, in case loading //www.youtube.com/iframe_api.

in scenario able move code relied on youtube player api being ready window.onyoutubeplayerapiready callback , used standard <script> include after, example:

... script tags non-youtube reliant code ... <script src="...jquery, plugins, site js..."></script>  ... youtube specific code followed youtube api script tag... <script>     window.onyoutubeiframeapiready = function () {         $('.video-gallery').gallery();     } </script> <script src="//www.youtube.com/iframe_api"></script>

however, believe option trigger custom event ready state, example (in coffeescript):

$(document).bind 'custom-ready', () ->      ... code in ready event callback ...  $ ->      # check if page includes youtube player api (this     # achieved in number of ways, here assume css class      # applied page body indicator.     if $('body.uses-youtube-player-api').length == 0          # page doesn't use youtube player api call         # custom ready event now.         $(document).trigger('custom-ready')  # if page load youtube player api trigger our custom # ready event in associated callback. window.onyoutubeplayerapiready = () ->     $(document).trigger('custom-ready')

i haven't tested above example , it's suggestion since imagine original example of how i've resolved issue isn't ideal in many cases.

remembering believe issue appeared caused when youtube player api code cached browser. prove case use random string load api player (e.g prefixing ?_ignore={insert random value} script tags src attribute) , see if resolves issue, if wouldn't efficient solution user require library reloaded every visit.


Comments

Post a Comment

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

i have created angular spa webapi backend using adal js authentication.as there no roles in ad, need manually add role claims in order give users access different api controllers. the roles stored in database. expecting inject claim through call webapi after authentication ad. webapi code might this. identity.addclaim(new claim("role", "user")); var ticket = new authenticationticket(identity, props); var accesstoken = startup.oauthbeareroptions.accesstokenformat.protect(ticket); is possible replace adal idtoken new token? is viable solution or there other better way handle this? as initial token generated azuread, possible edit token add new claim? appreciated. graph api supporting group claims. see here: http://justazure.com/azure-active-directory-part-4-group-claims/ if @ examples on page, users assigned groups , app can check group in claims. in current version of portal, need app manifest , modify it.
Read more

php - CakePHP HttpSockets send array of paramms -

i problem when make request (i can request). $link = 'http://uri/path/?param1=1&sid=2&sid=3&sid=4' $http = $httpsocket = new httpsocket(); $res = $httpsocket->get($link); if check request pr($http); i see : [line] => /url/path/?param1=1&sid%5b0%5d=2&sid%5b1%5d=3&sid%5b2%5d=4 http/1.1 and i'm getting empty response because server doesn't know parameters sid%5b0%5d=2 when try send parameters array : $data = array('param1' => '1', 'sid' => array('2','3', '4')); i see same changes %5b0%5d - additional indexes. how fix it? unfortunately , can not change server side, if send request in browser, i'll normal response in json format. when make request, can parameters this: $param1 = $_get['param1']; $sid= $_get['sid']; tip: use diferente names parameters. have multiples sid. use sid1, sid2, sid3... update: can parameters this:
Read more

node.js - Using Node without global install -

i'm working on few node & electron (atom shell) projects , i'm curious how them work without user having install node globally. i've seen few applications including node directory in project contains node.exe binary. how go setting node project use binary? edit: thought should add, i've searched everywhere answer this, unrelated results.
Read more