JavaScript Ninja – So You Want To Get A YouTube Video Streams Resource Without Ajax’ing Around? DAAAA!!!

Hello Readers! some time ago I’ve made a nice little Git repository named YouTube Downloader having most of raw resources I’ve gathered around which may be useful if you are intereseted in in-depth-understanding of the the YouTube JavaScript Player API Reference

(which is a nice mental leap towards making an hybrid (Android) APP or using the more challenging YouTube Android Player API or just making a bookmarklet or even yet another youtube downloader website/extension [please don’t!] ;) )

anyway..
..here is what you are really in for:

sources = (function(sources, tmp){
  return sources.split(',').map(function(source){
    tmp = {};
    source.split('&').forEach(function(part){
      part = part.split('=');
      tmp[ part[0] ] = decodeURIComponent( part[1] );
    });
    return tmp;
  });
}(
  ytplayer.config.args.url_encoded_fmt_stream_map
, []
));

and now for a pro tip, a zero-effort JSON beautifier formatting trick:

console.log(JSON.stringify(
sources
, null, 2));

hey! it’s probably even works with most of embedded youtube plugin, since it uses almost no dependencies by the very raw YouTube-Player “API/SDK” (which YouTube itself uses…)

..give it a try on this lovely video:

:)


edit: Tip: ǡre yoǘ ȃ coʍʍʌ-ϝiɍst Nåƶɨ? (*cough* *cough* me?)
this will ease your O.C.D.:

sources = JSON.stringify(sources, null, 2).replace(/,\n /g, "\n ,")

icompile.eladkarako.com_javascript_comma_first_2016-01-31_011351

or BETTER YET:

sources = JSON.stringify(sources, null, 2).replace(/,\n /g, "\n ,").replace(/ *(,(\ +))/g,"$2,")

who does not love a little bit of JavaScript RegEx backtrace replacing :)

icompile.eladkarako.com_javascript_comma_first_better_format_2016-01-31_011351

Oh yeah! comma-first bliss ;)

HandlebarsJS 2.0 CDN-Resources Explained

First Off..
what is runtime?

according to http://handlebarsjs.com/precompilation.html
you may pre-compile all your designated templates (- say you’ll have dynamic data set but constant website structure).

so essentially you do not need any of the engines used by Handlebars to compile templates.
this is where you grab your “SLIM” version of the Handlebars, named “runtime”.

AMD are modules used by RequireJS, used as a SHIM its essentially a file-loader + callback when its done.
Handlebars have an amd version of both the regular (a.k.a FULL) and the runtime (a.k.a NO COMPILER),
follow example here….

CLOUDFLARE has it all…

https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.amd.js

https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.amd.min.js

https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js

https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js

https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.runtime.amd.js

https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.runtime.amd.min.js

https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.runtime.js

https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.runtime.min.js

4Chan API – Cross-Domain Image Fetcher – Usage + Examples

The following example on my GitHub project-page, shows, hopefully a clear way, on how to do some Ajax requests on client side, fetching each of the threads in a board, in which all the posts, and all the image links within, 4chan_api

after fetching the information, a Handlebars-Mustache logicless template is using the aggregated data (images) to build a simple gallery,
which uses jQuery’s lazy-loading, so only images within the close-range of the browser’s VIEWPORT will be fetched from 4Chan (saving their’s data plan).

this is mainly academic, since the 4Chan-API documentation is quite poorly explained..

Loose Cross-Domain XML Policy

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
  <site-control permitted-cross-domain-policies="all"/>
  <allow-access-from domain="*" secure="false"/>
  <allow-http-request-headers-from domain="*" headers="*" secure="false"/>
</cross-domain-policy>