view a live demo<\/a>.<\/p>\nCreate the initial movie query to Netflix oData<\/h4>\n
This creates the query in a string, the sends it to Netflix via JSONP. Note that this requires the use of a proxy, due to cross-domain restrictions. You can get the code for a simple PHP proxy that I built at the bottom.<\/p>\n
\r\n\r\n function getodata() {\r\n \/\/ Build OData query\r\n var query = "http:\/\/odata.netflix.com\/Catalog" \/\/ netflix base url\r\n + "\/Titles" \/\/ top-level resource\r\n + "?$filter=ReleaseYear le 2010 and ReleaseYear ge 1990 and AverageRating gt 4" \/\/ filter by year and rating\r\n\t + "&$orderby=ReleaseYear,ShortName desc" \/\/ the order\r\n + "&$format=json"; \/\/ json request\r\n \r\n\t \/\/URLEncode the query - this is necessary for the proxy\r\n\t query = $.URLEncode(query);\r\n \r\n \/\/ Make JSONP call to Netflix\r\n $.ajax({\r\n dataType: "jsonp",\r\n url: 'jsonproxy.php?url=' + query,\r\n jsonpCallback: "callback",\r\n success: callback,\r\n\t error: errorMsg\r\n });\r\n }\r\n \r\n<\/code>\r\n<\/pre>\nProcessing the JSON response<\/h4>\n
This is the callback function that is called with the JSON is returned. It parses it out and outputs it to an html div.<\/p>\n
\r\n\r\n function callback(result) {\r\n \/\/ unwrap result\r\n var movies = result["d"]["results"];\r\n\tif(movies == null || movies == 0){\r\n\talert('Error loading title. Try the search.');\r\n\t}else{\r\n \/\/ show movies in template\r\n var showMovie = tmpl("movieTemplate");\r\n var html = "";\r\n for (var i = 0; i < movies.length; i++) {\r\n \/\/ flatten movie\r\n movies[i].BoxArtSmallUrl = movies[i].BoxArt.LargeUrl;\r\n\t \/\/escape the short title for passing to functions - takes care of single quotes\r\n\t movies[i].ShortName = escape(movies[i].ShortName);\r\n \/\/ render with template\r\n html += showMovie(movies[i]);\r\n \t\t}\r\n $("#movieTemplateContainer").html(html);\r\n\t}\r\n }\r\n<\/code>\r\n<\/pre>\nDisplaying the Results in HTML<\/h4>\n
This takes the responses and displays them in a template ‘{%= tag %}’, via Microtemplates.js.<\/p>\n
\r\n\r\n<div id="movieTemplateContainer"><\/div>\r\n \r\n<script id="movieTemplate" type="text\/html">\r\n <div class="titleholder">\r\n\t<div class="boxartholder">\r\n <img src="{%=BoxArtSmallUrl %}" \/>\r\n\t<p><a href="javascript:addQueue('{%=NetflixApiId%}','{%=Id%}');">Add to Queue<\/a><\/p>\r\n\t<p><a href="javascript:playInstant('{%=NetflixApiId%}','{%=Instant.Available%}','{%=Id%}');">Play Instantly<\/a><\/p>\r\n\t<\/div>\r\n\t<div class="synopsisholder">\r\n <strong>{%=Name%}<\/strong><br \/>\r\n\t({%=ReleaseYear %}) {%=Rating %}\r\n <p>{%=Synopsis %}<\/p>\r\n\t<p>Average Rating: {%=AverageRating %}<\/p> \r\n\t<p><a onclick="viewTrailer('{%=ShortName%}');" href="javascript:void(0);">View Trailer<\/a><\/p>\r\n\t<\/div>\r\n\t\r\n\t<br style="clear: both;" \/>\r\n \r\n\t<span id="playStatus{%=Id%}"><\/span>\r\n\t\r\n\t<span id="trailerStatus"><\/span>\r\n \r\n <\/div>\r\n\t\r\n<\/script>\r\n<\/code>\r\n<\/pre>\nUsing the Netflix functions<\/h4>\n
You can easily create links to add a title to someone’s queue or play it instantly. This requires a Netflix consumer key, which you can get for free by signing up for the NetFlix API, as well as the user to have a Netflix account.<\/p>\n
\r\n\r\n\/\/these are the Netflix account functions\r\nvar NFKEY = "YOURNETFLIXCONSUMERKEY";\r\nfunction playInstant(movieID,movieStatus,theID){\r\nvar playThis = movieID.substring(45);\r\nif(movieStatus == "true") {\r\nnflx.openPlayer('http:\/\/api.netflix.com\/catalog\/movie\/' + playThis, 0, 0, NFKEY);\r\n\t}else {\r\n\tdocument.getElementById("playStatus" + theID).innerHTML = "This movie is not available for instant play.";\r\n\t}\r\n}\r\n \r\n\/\/Add this title to your NetFlix queue\r\nfunction addQueue(movieID,theID){\r\nvar addThis = movieID.substring(45);\r\nvar getX = $(window).width()\/2;\r\nvar getY = document.getElementById("playStatus" + theID).offsetTop;\r\ngetX = getX - 200;\r\ngetY = getY - 400;\r\nnflx.addToQueue('http:\/\/api.netflix.com\/catalog\/movie\/' + addThis, getX, getY, NFKEY, 'disc', 'addMe');\r\n}\r\n<\/code>\r\n<\/pre>\nOpening the trailer<\/h4>\n
Since Netflix doesn’t offer trailers in the oData API, what I did is take the title, then run a query to the YouTube API, and return the first result that has the title keywords, as well as the word, ‘trailer’. Sometimes it works, sometimes it doesn’t. YouTube returns a JSON file, which I then parse to get the ID, then display it via a Highslide overlay.<\/p>\n
\r\n\r\n\/\/View the Trailer from YouTube\r\nfunction viewTrailer(movieName){\r\nmovieName = unescape(movieName);\r\n \r\n\/\/breaking the name up and getting rid of some known bullshit\r\n\/\/first, get rid of symbols\/spaces\r\nvar ytURL = movieName.replace(\/: \/g, "\/");\r\n \r\n\/\/now lets replace certain words\r\n var replace = new Array("Special ", "Edition", "Bonus ", "Material", "&", ","); \r\n var by = new Array("", "", "", "", "&", ""); \r\n for (var i=0; i<replace.length; i++) { \r\n ytURL = ytURL.replace(replace[i], by[i]); \r\n } \r\n \r\n\/\/finally, lets replace the the spaces with encoded commas - %2C\r\nytURL = ytURL.replace(\/\\s\/g, "%2C");\r\n \r\n\/\/append the url info to it\r\nytURL = "http:\/\/gdata.youtube.com\/feeds\/api\/videos?category=trailer%2C" + ytURL + "&max-results=1&alt=jsonc&v=2";\r\n \r\n \r\n\/\/Now we get the XML from YouTube and Parse It\r\n \/\/ Make JSONP call to Netflix\r\n $.ajax({\r\n dataType: "jsonp",\r\n url: ytURL,\r\n jsonpCallback: "callbackyt",\r\n success: callbackyt,\r\n\t error: errorMsg\r\n });\r\n \r\n \r\n} \/\/ end viewTrailer\r\n \r\n \r\n\/\/this is the youtube view trailer callback\r\n function callbackyt(result) {\r\n \/\/ unwrap result\r\n var movies = result["data"]["items"];\r\n\tif(movies == null || movies == 0){\r\n\talert('Sorry, no trailer is available for this title.');\r\n\t}else{\r\n\t\/\/load the trailer\r\n for (var i = 0; i < movies.length; i++) {\r\n \/\/call the youtube function\r\n\topenYouTube('http:\/\/www.youtube.com\/v\/' + movies[i].id + '&hl=en_US&fs=1');\r\n\t\t}\r\n\t}\r\n }\r\n \r\n \r\n \r\n\/\/this opens the youtube link in a highslide overlay\r\nfunction openYouTube(opener) {\r\nhs.preserveContent = false;\r\nhs.htmlExpand(null, { \r\n\t\tsrc: opener,\r\n\t\tobjectType: 'swf', \r\n\t\tobjectWidth: 640, \r\n\t\tobjectHeight: 385, \r\n\t\twidth: 640, \r\n\t\tswfOptions: { \r\n\t\t\tparams: { \r\n\t\t\t\tallowfullscreen: 'true' \r\n\t\t\t}\r\n\t\t}, \r\n\t\tmaincontentText: 'You need to upgrade your Flash player' \r\n\t});\r\n}\r\n<\/code>\r\n<\/pre>\nPHP Proxy for importing JSON data via cURL<\/h4>\n
You may find it necessary to use a proxy to import the data due to cross-domain restrictions. I found this out the hard way when Netflix suddenly dropped JSONP support and instead output the data as plain JSON, so I made this script to pull the data in and wrap my callback function name around it. There is a bunch of crap code in there to deal with certain characters in the querystring, but it works.<\/p>\n
\r\n\r\n<?php\r\n\/\/getting the variables\r\n$callback = $_GET['callback'];\r\n$url=urldecode(stripslashes($_GET['url']));\r\n \r\n\/\/replacing the spaces with + signs - otherwise cURL throws a bad request\r\n$url=str_replace(" ", "+", $url);\r\n \r\n\/\/replacing all # symbols\r\n$url=str_replace("#", "%23", $url);\r\n \r\n \r\n\/\/single quotes in movie titles fuck everything up\r\n\/\/replacing all single quotes with two single quotes\r\n$url=str_replace("'", "''", $url);\r\n \r\n\/\/replacing the first two single quotes back to one\r\n$url=preg_replace("\/''\/", "'", $url, 1); \r\n \r\n\/\/replacing the last two single quotes back to one\r\n$lastq = strrpos($url, "''");\r\nif($lastq != NULL || $lastq != "" || $lastq != FALSE || $lastq != "0"){\r\n$lastq = $lastq-1;\r\n$url=substr_replace($url, "'", $lastq,2);\r\n}\r\n \r\n\/\/now we must replace all amersands in the titles\r\n$start_limiter = '(';\r\n$end_limiter = ')';\r\n$haystack = $url;\r\n$start_pos = strpos($haystack,$start_limiter);\r\n$end_pos = strpos($haystack,$end_limiter,$start_pos);\r\n \r\nif ($start_pos != FALSE && $end_pos != FALSE)\r\n{\r\n$needle = substr($haystack, $start_pos+1, ($end_pos-1)-$start_pos);\r\n$newneedle = str_replace("&", "%26", $needle);\r\n \r\n\/\/spitting new title, sans ampersand back into the url\r\n$url = str_replace($needle, $newneedle, $url);\r\n}\r\n \r\n \r\n\/\/outputting the json file\r\nprint_r($callback . '(' . get_data($url) . ')'); \r\n \r\n\/* gets the data from a URL *\/\r\n \r\nfunction get_data($url)\r\n{\r\n$ch = curl_init();\r\n$timeout = 15;\r\ncurl_setopt($ch,CURLOPT_URL,$url);\r\ncurl_setopt($ch,CURLOPT_RETURNTRANSFER,1);\r\ncurl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);\r\n$data = curl_exec($ch);\r\ncurl_close($ch);\r\nreturn $data;\r\n}\r\n?>\r\n \r\n<\/code>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,1],"tags":[],"class_list":["post-129","post","type-post","status-publish","format-standard","hentry","category-computer-stuff","category-show-all"],"_links":{"self":[{"href":"https:\/\/halnesbitt.com\/blog\/wp-json\/wp\/v2\/posts\/129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/halnesbitt.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/halnesbitt.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/halnesbitt.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/halnesbitt.com\/blog\/wp-json\/wp\/v2\/comments?post=129"}],"version-history":[{"count":6,"href":"https:\/\/halnesbitt.com\/blog\/wp-json\/wp\/v2\/posts\/129\/revisions"}],"predecessor-version":[{"id":135,"href":"https:\/\/halnesbitt.com\/blog\/wp-json\/wp\/v2\/posts\/129\/revisions\/135"}],"wp:attachment":[{"href":"https:\/\/halnesbitt.com\/blog\/wp-json\/wp\/v2\/media?parent=129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/halnesbitt.com\/blog\/wp-json\/wp\/v2\/categories?post=129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/halnesbitt.com\/blog\/wp-json\/wp\/v2\/tags?post=129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}