Skip to content

Instantly share code, notes, and snippets.

@ultimape

ultimape/SeriesSubjugator.html

Created November 30, 2013 19:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ultimape/7723390 to your computer and use it in GitHub Desktop.
Save ultimape/7723390 to your computer and use it in GitHub Desktop.
Download ZIP
A specialized player that helps stream youtube series uninterrupted.
Raw
SeriesSubjugator.html
<!DOCTYPE html>
<html lang="en" style="width:100%">
<!-- copyright 2013 Nicholas Perry.
released under Creative Commons Attribution-ShareAlike 3.0 Unported License http://creativecommons.org/licenses/by-sa/3.0/deed.en_US
-->
<!-- used resources from this reference: https://developers.google.com/youtube/js_api_reference-->
<head>
<meta charset="utf-8" />
<title>Series Subjugator</title>
<script type="text/javascript">
//<![CDATA[
//* debug bits *//
window.onerror=function(msg, url, linenumber){
console.error("[%s]\t %s\n\t\t\t\t\t\t\t Url: %s\n\t\t\t\t\t\t\t Line Number: %s",
new Date().toISOString(),
msg,
url,
linenumber);
return true;}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
/* Polyfills */
// What is a Polyfill? https://www.google.com/search?q=define+polyfill
console.group("Loading Polyfills");
console.timeStamp("Loading Polyfills");
console.time("Loading Polyfills Time");
var numPolyfillsLoaded =0;
console.log("[%s] Checking for necessary polyfills.", new Date().toISOString());
/* Date.now()
// "The Date.now() method returns the number of milliseconds elapsed since 1 January 1970 00:00:00 UTC."
// Via: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now
*/
if (!Date.now) {
console.log("[%s] Date.now() polyfill loaded.", new Date().toISOString());
Date.now = function now() {
return new Date().getTime();
};
numPolyfillsLoaded++;
}
/* Date.toISOString()
// The toISOString() method returns a string in ISO format (ISO 8601 Extended Format), which can be described as follows: YYYY-MM-DDTHH:mm:ss.sssZ.
// The timezone is always UTC as denoted by the suffix "Z".
// Via: http://stackoverflow.com/a/8563517
*/
if ( !Date.prototype.toISOString ) {
console.log("[%s] dateObj.toISOString polyfill loaded.", new Date().toISOString());
( function() {
function pad(number) {
if ( number < 10 ) {
return '0' + number;
}
return number;
}
Date.prototype.toISOString = function() {
return this.getUTCFullYear() +
'-' + pad( this.getUTCMonth() + 1 ) +
'-' + pad( this.getUTCDate() ) +
'T' + pad( this.getUTCHours() ) +
':' + pad( this.getUTCMinutes() ) +
':' + pad( this.getUTCSeconds() ) +
'.' + (this.getUTCMilliseconds() / 1000).toFixed(3).slice( 2, 5 ) +
'Z';
};
numPolyfillsLoaded++;
}() );
}
/* requestAnimationFrame()
// used to allow the browswer to ratelimit at ~60fps
// Via: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
*/
(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
numPolyfillsLoaded++;
}());
console.log("[%s] Polyfills loaded: %i", new Date().toISOString(),numPolyfillsLoaded);
console.timeStamp("Loading Polyfills");
console.timeEnd("Loading Polyfills Time");
console.groupEnd(); // "Loading Polyfills"
//]]>
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mediaelement/2.13.1/js/mediaelement-and-player.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mediaelement/2.13.1/css/mediaelementplayer.min.css" />
<style>
html, body {
padding:0;
margin:0;
}
object#myytplayer {
width:1024px;
margin-left:240px;
}
#controls {
display:block;
min-width:1024px;
width:100%;
text-align:justify
float:right;
z-index:0;
}
#controls a {
display:block;
padding-left:0.25em;
padding-right:0.25em;
margin:0.12em;
margin-top:0;
float:left;
width:auto;
border:1px solid grey;
}
#controls a.first, span.first {
clear:both;
float:left;
}
#video-list {
float:left;
height:576px;
width:239px;
position:absolute;
z-index:0;
overflow:scroll;
}
#video-list a {
padding-left:0.2em;
padding-right:0.2em;
font-size:0.85em;
display:block;
}
</style>
</head>
<body style="width:100%">
<div style="width:100%">
<div id="video-list">
<span>Episode:</span>
</div>
<span style="color:gray;opacity:0.2;display:block; text-shadow:
0px 0px 20px gray; height:5px;z-index:2;position:relative;top:0.5em;line-height:1em;font-family:sans-serif;margin-left:576px;font-size:3em;font-weight:bold;text-transform:capitalize;" id="video_title">TITLE</span>
<div id="controls">
<div id="ytplayer" >
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<div style="display:block; text-align:left; width:1024px; margin-left:239px;margin-right:auto;">
<input style="margin:0" title="When the video ends, should we play the next video automatically?" id="continuous_play" name="continuous_play" value="continuous_play" checked type="checkbox" />
<label title="When the video ends, should we play the next video automatically?" for="continuous_play">Play Continuously?</label>
<textarea style="float:right;" id="timecode" name="timecode" rows="1" cols="35">TIMESTAMP</textarea>
</div>
<div style="float:left;display:block;clear:both;margin-left:239px">
<span class="first">Video Controls:</span>
<a href="javascript:void(0);" onclick="play();">Play</a>
<a href="javascript:void(0);" onclick="pause();">Pause</a>
<a href="javascript:void(0);" onclick="playPauseToggle();">Play/Pause</a>
<a href="javascript:void(0);" onclick="pause();rewind();">Stop</a>
<a href="javascript:void(0);" onclick="rewind();">Rewind</a>
<span class="first">Audio Controls:</span>
<a href="javascript:void(0);" onclick="mute();">mute</a>
<a href="javascript:void(0);" onclick="unmute();">unmute</a>
<a href="javascript:void(0);" onclick="muteUnmuteToggle();">mute/unmute</a>
</div>
<div style="float:left; margin-left:5em;display:block;">
<span class="first">Seek:</span>
<a href="javascript:void(0);" onclick="seekBy(-60);">-1m</a>
<a href="javascript:void(0);" onclick="seekBy(-30);">-30s</a>
<a href="javascript:void(0);" onclick="seekBy(-5);">-5s</a>
<a href="javascript:void(0);" onclick="seekBy(-3);">-3s</a>
<a href="javascript:void(0);" onclick="seekBy(-1);">-1s</a>
<a href="javascript:void(0);" onclick="seekBy(1);">+1s</a>
<a href="javascript:void(0);" onclick="seekBy(3);">+3s</a>
<a href="javascript:void(0);" onclick="seekBy(5);">+5s</a>
<a href="javascript:void(0);" onclick="seekBy(30);">+30s</a>
<a href="javascript:void(0);" onclick="seekBy(60);">+1m</a>
<span class="first">Naviage:</span>
<a href="javascript:void(0);" onclick="previousVideo();">Previous Episode</a>
<a href="javascript:void(0);" onclick="nextVideo();">Next Episode</a>
<a href="javascript:void(0);" onclick="randomVideo();">Random Episode</a>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//<![CDATA[
var booklist = new Array();
console.group("Loading Episodes");
console.time("Loading Episodes");
var episodelist = { "episode" : [
{"id" : "1", "title" : "invocation", "url" : "http://ashow.zefrank.com/episodes/1", "youtube_id" : "RYlCVwxoL_g",},
{"id" : "2", "title" : "been a while", "url" : "http://ashow.zefrank.com/episodes/2", "youtube_id" : "QeN-IXF4yHo",},
{"id" : "3", "title" : "michelle part 1", "url" : "http://ashow.zefrank.com/episodes/3", "youtube_id" : "VwCsP7Lsaww",},
{"id" : "4", "title" : "warming up the nows", "url" : "http://ashow.zefrank.com/episodes/4", "youtube_id" : "k9tmAkgzFc8",},
{"id" : "5", "title" : "special effects", "url" : "http://ashow.zefrank.com/episodes/5", "youtube_id" : "glq1tK4QMOw",},
{"id" : "6", "title" : "TMMTO: robot future", "url" : "http://ashow.zefrank.com/episodes/6", "youtube_id" : "xP3fav9Pv3c",},
{"id" : "7", "title" : "thinks like me", "url" : "http://ashow.zefrank.com/episodes/7", "youtube_id" : "YSzWGPyacag",},
{"id" : "8", "title" : "make believe", "url" : "http://ashow.zefrank.com/episodes/8", "youtube_id" : "Bta00Hp4gho",},
{"id" : "9", "title" : "NEN", "url" : "http://ashow.zefrank.com/episodes/9", "youtube_id" : "wTPPw_7VHis",},
{"id" : "10", "title" : "TMMTO: comfort", "url" : "http://ashow.zefrank.com/episodes/10", "youtube_id" : "e-Y9bqwVnIY",},
{"id" : "11", "title" : "it's you not me", "url" : "http://ashow.zefrank.com/episodes/11", "youtube_id" : "zmWTb8mW58k",},
{"id" : "12", "title" : "want to do", "url" : "http://ashow.zefrank.com/episodes/12", "youtube_id" : "xlfuSSaSmTw",},
{"id" : "13", "title" : "life advice from twitter", "url" : "http://ashow.zefrank.com/episodes/13", "youtube_id" : "8HSjsLVYMA4",},
{"id" : "14", "title" : "how you editing", "url" : "http://ashow.zefrank.com/episodes/14", "youtube_id" : "V1f7O-6N_IM",},
{"id" : "15", "title" : "everything thing", "url" : "http://ashow.zefrank.com/episodes/15", "youtube_id" : "Y0B0h4L2eEU",},
{"id" : "16", "title" : "finishing", "url" : "http://ashow.zefrank.com/episodes/16", "youtube_id" : "etGjtkF6j60",},
{"id" : "17", "title" : "chase that happy", "url" : "http://ashow.zefrank.com/episodes/17", "youtube_id" : "nTQWtJVlJhk",},
{"id" : "18", "title" : "current.events.", "url" : "http://ashow.zefrank.com/episodes/18", "youtube_id" : "T8TOgN25LHU",},
{"id" : "19", "title" : "TMMTO: hummingbirds", "url" : "http://ashow.zefrank.com/episodes/19", "youtube_id" : "vnN0L-wkU-Y",},
{"id" : "20", "title" : "weirdnessday", "url" : "http://ashow.zefrank.com/episodes/20", "youtube_id" : "qbLmQu59hp4",},
{"id" : "21", "title" : "my pupils", "url" : "http://ashow.zefrank.com/episodes/21", "youtube_id" : "GW_mkwFMKOs",},
{"id" : "22", "title" : "diaries", "url" : "http://ashow.zefrank.com/episodes/22", "youtube_id" : "u7UjyMuU-DA",},
{"id" : "23", "title" : "be yourself", "url" : "http://ashow.zefrank.com/episodes/23", "youtube_id" : "fLLz7O9Lf6k",},
{"id" : "24", "title" : "syria", "url" : "http://ashow.zefrank.com/episodes/24", "youtube_id" : "YRFz7629cuw",},
{"id" : "25", "title" : "your eyes are stupid", "url" : "http://ashow.zefrank.com/episodes/25", "youtube_id" : "dJyvcNmYwr4",},
{"id" : "26", "title" : "exformation", "url" : "http://ashow.zefrank.com/episodes/26", "youtube_id" : "F9zfCMp99-A",},
{"id" : "27", "title" : "field trip", "url" : "http://ashow.zefrank.com/episodes/27", "youtube_id" : "a_2JELZpSm0",},
{"id" : "28", "title" : "face punch", "url" : "http://ashow.zefrank.com/episodes/28", "youtube_id" : "N5fXtThdR8I",},
{"id" : "29", "title" : "breaking normal", "url" : "http://ashow.zefrank.com/episodes/29", "youtube_id" : "gZKXrLjCwa8",},
{"id" : "30", "title" : "france", "url" : "http://ashow.zefrank.com/episodes/30", "youtube_id" : "ioP0_HD-oW0",},
{"id" : "31", "title" : "supposedtobes", "url" : "http://ashow.zefrank.com/episodes/31", "youtube_id" : "i2mGEthYWjQ",},
{"id" : "32", "title" : "unfair", "url" : "http://ashow.zefrank.com/episodes/32", "youtube_id" : "xFmCZKq3o58",},
{"id" : "33", "title" : "shoes", "url" : "http://ashow.zefrank.com/episodes/33", "youtube_id" : "9gQhOB50KUY",},
{"id" : "34", "title" : "planning to make", "url" : "http://ashow.zefrank.com/episodes/34", "youtube_id" : "tnF8DKfFNLE",},
{"id" : "35", "title" : "slowing down", "url" : "http://ashow.zefrank.com/episodes/35", "youtube_id" : "xcHRxKJlZOo",},
{"id" : "36", "title" : "omg higgs", "url" : "http://ashow.zefrank.com/episodes/36", "youtube_id" : "PUnjlqVh--s",},
{"id" : "37", "title" : "mediuming", "url" : "http://ashow.zefrank.com/episodes/37", "youtube_id" : "A5Cl1ReDUAw",},
{"id" : "38", "title" : "teen brain", "url" : "http://ashow.zefrank.com/episodes/38", "youtube_id" : "-KQb3Mx2WMw",},
{"id" : "39", "title" : "so much to do!", "url" : "http://ashow.zefrank.com/episodes/39", "youtube_id" : "fzm9LnsDLFc",},
{"id" : "40", "title" : "hick hick hick", "url" : "http://ashow.zefrank.com/episodes/40", "youtube_id" : "8BLeZfbNmRk",},
{"id" : "41", "title" : "the doctor's office", "url" : "http://ashow.zefrank.com/episodes/41", "youtube_id" : "ZTtOlnAjmSI",},
{"id" : "42", "title" : "check list", "url" : "http://ashow.zefrank.com/episodes/42", "youtube_id" : "QFl3VSSE1BY",},
{"id" : "43", "title" : "back again", "url" : "http://ashow.zefrank.com/episodes/43", "youtube_id" : "y_FCitOcM7g",},
{"id" : "44", "title" : "i forget how", "url" : "http://ashow.zefrank.com/episodes/44", "youtube_id" : "yYpaKD7gWWo",},
{"id" : "45", "title" : "finishing book", "url" : "http://ashow.zefrank.com/episodes/45", "youtube_id" : "WCxOqknX1cQ",},
{"id" : "46", "title" : "how to public speaking", "url" : "http://ashow.zefrank.com/episodes/46", "youtube_id" : "pVumgiMJeag",},
{"id" : "47", "title" : "cholesterol", "url" : "http://ashow.zefrank.com/episodes/47", "youtube_id" : "vBih2DYpno8",},
{"id" : "48", "title" : "catching up", "url" : "http://ashow.zefrank.com/episodes/48", "youtube_id" : "xHdrgzeNtP8",},
{"id" : "49", "title" : "job interview", "url" : "http://ashow.zefrank.com/episodes/49", "youtube_id" : "Nnc69otnAjI",},
{"id" : "50", "title" : "begendings", "url" : "http://ashow.zefrank.com/episodes/50", "youtube_id" : "3dkKxONJOp4",},
{"id" : "51", "title" : "projector", "url" : "http://ashow.zefrank.com/episodes/51", "youtube_id" : "q6z6T3UeOjE",},
{"id" : "52", "title" : "leaving", "url" : "http://ashow.zefrank.com/episodes/52", "youtube_id" : "7p1eSJvjd5w",},
{"id" : "53", "title" : "the tongue show", "url" : "http://ashow.zefrank.com/episodes/53", "youtube_id" : "O5_fECjV43Q",},
{"id" : "54", "title" : "awkward", "url" : "http://ashow.zefrank.com/episodes/54", "youtube_id" : "xE1GpkZpkNw",},
{"id" : "55", "title" : "overthink", "url" : "http://ashow.zefrank.com/episodes/55", "youtube_id" : "uZOPUE1lBOI",},
{"id" : "56", "title" : "self soothing", "url" : "http://ashow.zefrank.com/episodes/56", "youtube_id" : "qj3JZ6N9Be8",},
{"id" : "57", "title" : "shortsmallsweet", "url" : "http://ashow.zefrank.com/episodes/57", "youtube_id" : "-8rGOA_L7IM",},
{"id" : "58", "title" : "the sweetness", "url" : "http://ashow.zefrank.com/episodes/58", "youtube_id" : "tS3z8Pm8U6I",},
{"id" : "59", "title" : "good books", "url" : "http://ashow.zefrank.com/episodes/59", "youtube_id" : "2Dtu8y_XuOY",},
{"id" : "60", "title" : "shuttle...", "url" : "http://ashow.zefrank.com/episodes/60", "youtube_id" : "6lhl8rmq_20",},
{"id" : "61", "title" : "shame", "url" : "http://ashow.zefrank.com/episodes/61", "youtube_id" : "EA43AEcsl2A",},
{"id" : "62", "title" : "sex questions", "url" : "http://ashow.zefrank.com/episodes/62", "youtube_id" : "eG9VPvhRsuY",},
{"id" : "63", "title" : "2601 people wrote this song", "url" : "http://ashow.zefrank.com/episodes/63", "youtube_id" : "ROkrrYYkUhQ",},
{"id" : "64", "title" : "oddly day", "url" : "http://ashow.zefrank.com/episodes/64", "youtube_id" : "luE_0FaTAwE",},
{"id" : "65", "title" : "raw", "url" : "http://ashow.zefrank.com/episodes/65", "youtube_id" : "PQbSeEGdVvk",},
{"id" : "66", "title" : "getting better", "url" : "http://ashow.zefrank.com/episodes/66", "youtube_id" : "dFgQzaaUwqQ",},
{"id" : "67", "title" : "true facts about hedgehogs", "url" : "http://ashow.zefrank.com/episodes/67", "youtube_id" : "EnBh7OcilfM",},
{"id" : "68", "title" : "soundz", "url" : "http://ashow.zefrank.com/episodes/68", "youtube_id" : "dBWxMLC3BkM",},
{"id" : "69", "title" : "vp debateness", "url" : "http://ashow.zefrank.com/episodes/69", "youtube_id" : "lM6XVk01lgQ",},
{"id" : "70", "title" : "intern", "url" : "http://ashow.zefrank.com/episodes/70", "youtube_id" : "raLp8m-5tNs",},
{"id" : "71", "title" : "very important notes on the second debate", "url" : "http://ashow.zefrank.com/episodes/71", "youtube_id" : "MKRz6640B04",},
{"id" : "72", "title" : "hr violation", "url" : "http://ashow.zefrank.com/episodes/72", "youtube_id" : "QNnS24qfMSs",},
{"id" : "73", "title" : "the final debate", "url" : "http://ashow.zefrank.com/episodes/73", "youtube_id" : "wqLCkOHUqFA",},
{"id" : "74", "title" : "notes on friendship", "url" : "http://ashow.zefrank.com/episodes/74", "youtube_id" : "bklA2oPVKUU",},
{"id" : "75", "title" : "this week (instructions)", "url" : "http://ashow.zefrank.com/episodes/75", "youtube_id" : "vUUhA2xEvfc",},
{"id" : "76", "title" : "the man's pebble (intern show #1)", "url" : "http://ashow.zefrank.com/episodes/76", "youtube_id" : "0QDBsAVZA7s",},
{"id" : "77", "title" : "life school (intern show #2) ", "url" : "http://ashow.zefrank.com/episodes/77", "youtube_id" : "EKHKHBHIjSA",},
{"id" : "78", "title" : "election", "url" : "http://ashow.zefrank.com/episodes/78", "youtube_id" : "H_X-H-kLskQ",},
{"id" : "79", "title" : "hack to power, brian", "url" : "http://ashow.zefrank.com/episodes/79", "youtube_id" : "WnG4dJT3itM",},
{"id" : "80", "title" : "crushing words", "url" : "http://ashow.zefrank.com/episodes/80", "youtube_id" : "xJ9e32MNEOk",},
{"id" : "81", "title" : "228 bees", "url" : "http://ashow.zefrank.com/episodes/81", "youtube_id" : "3dFKnOaGwLs",},
{"id" : "82", "title" : "thank you", "url" : "http://ashow.zefrank.com/episodes/82", "youtube_id" : "-AOIAomyYks",},
{"id" : "83", "title" : "museum", "url" : "http://ashow.zefrank.com/episodes/83", "youtube_id" : "u48iUyTOBRo",},
{"id" : "84", "title" : "body karaoke", "url" : "http://ashow.zefrank.com/episodes/84", "youtube_id" : "O80Ffwm_Df8",},
{"id" : "85", "title" : "why i like los angeles", "url" : "http://ashow.zefrank.com/episodes/85", "youtube_id" : "05JCmuwiHGc",},
{"id" : "86", "title" : "songs about us", "url" : "http://ashow.zefrank.com/episodes/86", "youtube_id" : "leLfW2laViA",},
{"id" : "87", "title" : "true facts about baby echidnas", "url" : "http://ashow.zefrank.com/episodes/87", "youtube_id" : "L6kAE06mJAQ",},
{"id" : "88", "title" : "dealing with rejection", "url" : "http://ashow.zefrank.com/episodes/88", "youtube_id" : "QWVElQ6NfcE",},
{"id" : "89", "title" : "life rhythm", "url" : "http://ashow.zefrank.com/episodes/89", "youtube_id" : "bhEGjVojYmk",},
{"id" : "90", "title" : "true facts - angler fish", "url" : "http://ashow.zefrank.com/episodes/90", "youtube_id" : "Z-BbpaNXbxg",},
{"id" : "91", "title" : "bag of snot", "url" : "http://ashow.zefrank.com/episodes/91", "youtube_id" : "Ke_GpEYtkyI",},
{"id" : "92", "title" : "true facts about sloths", "url" : "http://ashow.zefrank.com/episodes/92", "youtube_id" : "XrUM8m2rnP0",},
{"id" : "93", "title" : "kindness dammit", "url" : "http://ashow.zefrank.com/episodes/93", "youtube_id" : "504__4ZzHac",},
{"id" : "94", "title" : "true facts about morgan freeman", "url" : "http://ashow.zefrank.com/episodes/94", "youtube_id" : "Ch5MEJk5ZCQ",},
{"id" : "95", "title" : "envy", "url" : "http://ashow.zefrank.com/episodes/95", "youtube_id" : "tAlEnqrJ9BY",},
{"id" : "96", "title" : "true facts about the seahorse", "url" : "http://ashow.zefrank.com/episodes/96", "youtube_id" : "UqYUTTqupOY",},
{"id" : "97", "title" : "hard f#$@ng work ", "url" : "http://ashow.zefrank.com/episodes/97", "youtube_id" : "u2cMjeSvZSs",},
{"id" : "98", "title" : "true facts about the tarsier", "url" : "http://ashow.zefrank.com/episodes/98", "youtube_id" : "6Jz0JcQYtqo",},
{"id" : "99", "title" : "what do you love about your father? ", "url" : "http://ashow.zefrank.com/episodes/99", "youtube_id" : "sQDY3nw7GDI",},
{"id" : "100", "title" : "true facts about the leaf katydid ", "url" : "http://ashow.zefrank.com/episodes/100", "youtube_id" : "SvjSP2xYZm8",},
{"id" : "101", "title" : "be brave", "url" : "http://ashow.zefrank.com/episodes/101", "youtube_id" : "4syWbhqEwdw",},
{"id" : "102", "title" : "true facts about the land snail", "url" : "http://ashow.zefrank.com/episodes/102", "youtube_id" : "VTV23B5gBsQ",},
{"id" : "103", "title" : "how to fight as a couple", "url" : "http://ashow.zefrank.com/episodes/103", "youtube_id" : "IE-P11KKYFs",},
{"id" : "104", "title" : "true facts about the mantis", "url" : "http://ashow.zefrank.com/episodes/104", "youtube_id" : "0aSCPmabRpM",},
{"id" : "105", "title" : "the human test (volume. 1.1.1)", "url" : "http://ashow.zefrank.com/episodes/105", "youtube_id" : "sMkTeHAorY8",},
{"id" : "106", "title" : "true facts about the chameleon", "url" : "http://ashow.zefrank.com/episodes/106", "youtube_id" : "UR_byRbXxvs",},
{"id" : "107", "title" : "true facts about the fruit bat", "url" : "http://ashow.zefrank.com/episodes/107", "youtube_id" : "j_SjhcdF_J4",},
{"id" : "108", "title" : "don't yuck my yum", "url" : "http://ashow.zefrank.com/episodes/108", "youtube_id" : "knro0i2JH44",},
{"id" : "109", "title" : "the human test (volume 2)", "url" : "http://ashow.zefrank.com/episodes/109", "youtube_id" : "-kRPlbFeask",},
{"id" : "110", "title" : "find the others", "url" : "http://ashow.zefrank.com/episodes/110", "youtube_id" : "w9HVAHbg_3k",},
{"id" : "111", "title" : "true facts about the dung beetle", "url" : "http://ashow.zefrank.com/episodes/111", "youtube_id" : "Q1zbgd6xpGQ",},
{"id" : "112", "title" : "what's on your happylist?", "url" : "http://ashow.zefrank.com/episodes/112", "youtube_id" : "syR_NinJ2B0",},
{"id" : "113", "title" : "carrot hugs", "url" : "http://ashow.zefrank.com/episodes/113", "youtube_id" : "8agVRne6pQA",},
{"id" : "114", "title" : "true facts about the naked mole rat", "url" : "http://ashow.zefrank.com/episodes/114", "youtube_id" : "eHi9FvUPSdQ",},
{"id" : "115", "title" : "anus writes a letter", "url" : "http://ashow.zefrank.com/episodes/115", "youtube_id" : "VYz1yVg9L_I",},
{"id" : "116", "title" : "thoughts on the creative career", "url" : "http://ashow.zefrank.com/episodes/116", "youtube_id" : "G9RN-Uf1rBY",},
{"id" : "117", "title" : "true facts about the sea pig", "url" : "http://ashow.zefrank.com/episodes/117", "youtube_id" : "_y4DbZivHCY",},
{"id" : "118", "title" : "friend: hank green on mattering", "url" : "http://ashow.zefrank.com/episodes/118", "youtube_id" : "wzRVomefcNM",},
{"id" : "119", "title" : "friend: jared sosa on growing up in norfolk, va", "url" : "http://ashow.zefrank.com/episodes/119", "youtube_id" : "9oxUd-y2cGg",},
{"id" : "120", "title" : "true facts about the duck", "url" : "http://ashow.zefrank.com/episodes/120", "youtube_id" : "6k01DIVDJlY",},
{"id" : "121", "title" : "on worrying too much", "url" : "http://ashow.zefrank.com/episodes/121", "youtube_id" : "NvZq8vnKH2U",},
{"id" : "122", "title" : "on changing into someone else", "url" : "http://ashow.zefrank.com/episodes/122", "youtube_id" : "tkKOijiatLo",},
{"id" : "123", "title" : "sad cat diary", "url" : "http://ashow.zefrank.com/episodes/123", "youtube_id" : "PKffm2uI4dk",},
{"id" : "124", "title" : "true facts about the tapir", "url" : "http://ashow.zefrank.com/episodes/124", "youtube_id" : "zJm6nDnR2SE",},
{"id" : "125", "title" : "the human test: love &amp; loss", "url" : "http://ashow.zefrank.com/episodes/125", "youtube_id" : "ym_c0gVMMHc",},
{"id" : "126", "title" : "on starting college", "url" : "http://ashow.zefrank.com/episodes/126", "youtube_id" : "WAS9g8e5hoc",},
{"id" : "127", "title" : "sad dog diary", "url" : "http://ashow.zefrank.com/episodes/127", "youtube_id" : "Xw1C5T-fH2Y",},
{"id" : "128", "title" : "the time you have (in jelly beans)", "url" : "http://ashow.zefrank.com/episodes/128", "youtube_id" : "BOksW_NabEk",},
{"id" : "129", "title" : "true facts about the mantis shrimp", "url" : "http://ashow.zefrank.com/episodes/129", "youtube_id" : "F5FEj9U-CJM",},
{"id" : "130", "title" : "a song for freud", "url" : "http://ashow.zefrank.com/episodes/130", "youtube_id" : "sTRGK-DPq_M",},
{"id" : "131", "title" : "on being alone", "url" : "http://ashow.zefrank.com/episodes/131", "youtube_id" : "hA8cvUJpbYc",},
{"id" : "132", "title" : "true facts about the owl", "url" : "http://ashow.zefrank.com/episodes/132", "youtube_id" : "XeFxdkaFzRA",},
{"id" : "133", "title" : "fitting in cardboard", "url" : "http://ashow.zefrank.com/episodes/133", "youtube_id" : "LwNJZUZFt-U",},
{"id" : "134", "title" : "true facts about the frog ", "url" : "http://ashow.zefrank.com/episodes/134", "youtube_id" : "ndQZBQJf034",},
{"id" : "135", "title" : "true facts about the cuttlefish", "url" : "http://ashow.zefrank.com/episodes/135", "youtube_id" : "GDwOi7HpHtQ",},
{"id" : "136", "title" : "(confused) thoughts on an unsticking technique", "url" : "http://ashow.zefrank.com/episodes/136", "youtube_id" : "8eX88oKpKKo",},
], };
var video_id = new Array();
var videoList = document.getElementById('video-list');
episodelist.episode.forEach( function(episode) {
if(!(episode.youtube_id === "" || episode.youtube_id == undefined)){
console.log("[%s] "+episode.id+" "+episode.youtube_id, new Date().toISOString());
video_id.push(episode.youtube_id);
videoList.innerHTML += '<a href="javascript:void(0);" onclick="video_number='+(episode.id-1)+';loadVideo(\''+episode.youtube_id+'\');">['+episode.id+'] '+episode.title+'</a>'
}
});
console.timeEnd("Loading Episodes");
console.groupEnd();
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
"use strict";
var thePlayer = null;
var playerParams = { allowScriptAccess: "always" };
var playerAttributes = { id: "myytplayer", wmode:"transparent" };
var video_number= 0;
var youtube_embed_url_options = "?enablejsapi=1&playerapiid=ytplayer&version=3"
var chromeless = true;
var youtube_embed_url = "//www.youtube.com/v/"+video_id[video_number]+youtube_embed_url_options;
if(chromeless) {
youtube_embed_url = "//www.youtube.com/apiplayer?enablejsapi=1&version=3"; // chromeless
}
var divToReplace = "ytplayer";
var width = "1024";
var height = "576";
var minSwfVersion = "8";
var quality = "medium";
var allAvailablePlaybackRates;
var currentPlayerState;
var lastPlayerState;
var currentPlayerTime;
var currentVideoDuration;
var lastPlayerTime;
var timeDifference
var isVideoCued;
var allowSeekAhead;
var timecodeArea = document.getElementById('timecode');
var continuousPlayCheckbox = document.getElementById('continuous_play');
var videoTitle = document.getElementById('video_title');
//todo, change to html5 video
swfobject.embedSWF(
youtube_embed_url,
divToReplace,
width,
height,
minSwfVersion,
null,
null,
playerParams,
playerAttributes
);
function onYouTubePlayerReady(playerId) {
window.requestAnimationFrame(updateTimestamp);
thePlayer = document.getElementById("myytplayer");
thePlayer.addEventListener("onStateChange", "onytplayerStateChange");
thePlayer.addEventListener("onPlaybackQualityChange", "onytplayerQualityChange");
thePlayer.addEventListener("onPlaybackRateChange","onytplayerPlaybackRateChange");
thePlayer.addEventListener("onError","onytplayerError");
thePlayer.addEventListener("onApiChange","onytplayerApiChange");
thePlayer.setPlaybackQuality(quality);
allAvailablePlaybackRates = thePlayer.getAvailablePlaybackRates();
console.log("[%s] rates: "+ allAvailablePlaybackRates, new Date().toISOString());
console.log("[%s] current rate: "+ thePlayer.getPlaybackRate(), new Date().toISOString());
window.requestAnimationFrame(updateTimestamp);
}
function updateTimestamp(time) {
currentPlayerTime = thePlayer.getCurrentTime();
timecodeArea.innerHTML
= codefiySeconds(currentPlayerTime) + " / " + codefiySeconds(currentVideoDuration);
window.requestAnimationFrame(updateTimestamp);
}
function codefiySeconds(time) {
var days = parseInt( time / 3600 );
var hours = parseInt( time / 3600 ) % 24;
var minutes = parseInt( time / 60 ) % 60;
var seconds = time % 60;;
var textDays = days < 10 ? "0"+days : days;
var textHours = hours < 10 ? "0"+hours : hours;
var textMinutes = minutes < 10 ? "0"+minutes : minutes;
var textSeconds = seconds < 10 ? "0"+seconds.toFixed(3) : seconds.toFixed(3) ;
return ""+ (days > 0 ? "P"+textDays+"DT":"")+(hours > 0 ? textHours+":" :"")+textMinutes+":"+textSeconds+"";
}
function onytplayerStateChange(newState) {
var stateName = "";
currentPlayerState = newState;
currentPlayerTime = thePlayer.getCurrentTime();
switch (currentPlayerState) {
case -1:
if(chromeless && !isVideoCued ) {
loadVideo(video_id[video_number]);
isVideoCued = false;
}
stateName = "UNSTARTED";
lastPlayerTime = thePlayer.getCurrentTime();
break;
case 0:
stateName = "ENDED";
lastPlayerTime = thePlayer.getCurrentTime();
if(continuousPlayCheckbox.checked) {
isVideoCued = true;
nextVideo();
}
break;
case 1:
stateName = "PLAYING";
currentVideoDuration = thePlayer.getDuration();
currentPlayerTime = thePlayer.getCurrentTime();
break;
case 2:
stateName = "PAUSED";
timeDifference = currentPlayerTime-lastPlayerTime;
if (lastPlayerState == 1) {
console.log("[%s] Watched "+timeDifference+ " of Video", new Date().toISOString());
} else if (lastPlayerState == 2 || lastPlayerState==-1 || lastPlayerState == 0) {
console.log("[%s] Skipped "+timeDifference+ "of Video", new Date().toISOString());
} else {
console.log("[%s] unknown operation "+timeDifference+" of Video", new Date().toISOString());
}
lastPlayerTime = thePlayer.getCurrentTime();
if(continuousPlayCheckbox.checked && (currentVideoDuration - currentPlayerTime <= 0.001) ) {
isVideoCued = true;
nextVideo();
}
break;
case 3:
stateName = "BUFFERING";
break;
case 5:
stateName = "CUED";
if(isVideoCued || lastPlayerState == 3 ) {
isVideoCued=false;
play();
currentVideoDuration = thePlayer.getDuration();
}
break;
default:
stateName = "UNKNOWN";
break;
}
console.log("[%s] State: \""+newState+"\"\tIdentified as \""+stateName+"\" Video time: "+currentPlayerTime, new Date().toISOString());
lastPlayerTime = currentPlayerTime;
lastPlayerState = currentPlayerState;
}
function onytplayerQualityChange(newQuality) {
console.log("[%s] Quality Changed: \""+newQuality+"\"", new Date().toISOString());
}
function onytplayerPlaybackRateChange(newPlaybackRate) {
console.log("[%s] Playback Rate Changed: \""+newPlaybackRate+"\"", new Date().toISOString());
}
function onytplayerError(errorCode) {
var errorCodeName = "";
var errorCodeDescription = "";
switch (errorCode) {
case 2:
errorCodeName = "INVALID_REQUEST";
errorCodeDescription="The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks.";
break;
case 100:
errorCodeName = "VIDEO_NOT_FOUND";
errorCodeDescription="The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.";
break;
case 101:
errorCodeName = "EMBED_NOT_ALLOWED";
errorCodeDescription="The owner of the requested video does not allow it to be played in embedded players.";
break;
case 150:
errorCodeName = "EMBED_NOT_ALLOWED_2";
errorCodeDescription="The owner of the requested video does not allow it to be played in embedded players";
break;
default:
errorCodeName = "UNKNOWN";
errorCodeDescription="An unknown error was encountered.";
break;
}
console.log("[%s] Error Encountered: \""+errorCodeName+"["+errorCode+"]\"\r\n\tError Description: \""+errorCodeDescription+"\"", new Date().toISOString());
}
function onytplayerApiChange() {
var moduleOptions = thePlayer.getOptions();
console.log("[%s] API changed, modules loaded: \""+moduleOptions.length+"\"", new Date().toISOString());
moduleOptions.forEach( function(module) {
var options = thePlayer.getOptions(module);
console.log("[%s] tModule:"+module+", options loaded: \""+options.length+"\"", new Date().toISOString());
options.forEach( function(opt) {
optValue = thePlayer.getOption(module,opt);
console.log("[%s] t\tOption: "+opt+"\r\n\t\t\tValue:"+optValue, new Date().toISOString());
});
});
}
function play() {
if (thePlayer) {
console.log("[%s] Playing Video", new Date().toISOString());
thePlayer.playVideo();
}
}
function pause() {
if (thePlayer) {
console.log("[%s] Pausing Video", new Date().toISOString());
thePlayer.pauseVideo();
}
}
function playPauseToggle() {
if(thePlayer) {
var curState = thePlayer.getPlayerState()
console.log("[%s] Toggleing Video", new Date().toISOString());
switch (curState) {
case -1:
console.log("[%s] Video has not Started", new Date().toISOString());
play();
break;
case 0:
console.log("[%s] Video has Ended", new Date().toISOString());
rewind();
play();
break;
case 1:
console.log("[%s] Video is Playing", new Date().toISOString());
pause();
break;
case 2:
console.log("[%s] Video is Paused", new Date().toISOString());
play();
break;
case 3:
console.log("[%s] Video is Bufffering.", new Date().toISOString());
setTimeout(playPauseToggle,1000);
break;
case 5:
console.log("[%s] Video is Cued", new Date().toISOString());
play();
break;
default:
console.log("[%s] tUnknown State, nothing to do.", new Date().toISOString());
break;
}
}
}
function rewind() {
seek(0);
}
function mute() {
if(thePlayer) {
thePlayer.mute();
}
}
function unmute() {
if(thePlayer) {
thePlayer.unMute();
}
}
function muteUnmuteToggle() {
if(thePlayer) {
if(thePlayer.isMuted()) {
unmute();
} else {
mute();
}
}
}
function seekBy(ammount) {
currentPlayerTime = thePlayer.getCurrentTime();
var direction = "";
if(ammount < 0) {
direction = "back";
} else {
direction = "forward";
}
console.log("[%s] Seeking "+direction+" by "+Math.abs(ammount)+" seconds", new Date().toISOString());
seek(currentPlayerTime+ammount);
}
function seek(time) {
allowSeekAhead = true;
if (time < 0) {
time = 0;
}
if (time > thePlayer.getDuration()) {
time = thePlayer.getDuration();
}
if (thePlayer) {
console.log("[%s] Seeking Video To "+time, new Date().toISOString());
thePlayer.seekTo(time,allowSeekAhead);
}
}
function nextVideo() {
// cycle the video
video_number++;
if (video_number > (video_id.length -1) ) {
video_number = 0;
}
loadVideo(video_id[video_number]);
}
function previousVideo() {
// cycle the video
video_number--;
if (video_number < 0 ) {
video_number = video_id.length - 1 ;
}
loadVideo(video_id[video_number]);
}
function randomVideo() {
var rand_number = Math.floor(Math.random() * video_id.length);
video_number =rand_number;
loadVideo(video_id[video_number]);
}
function loadVideo(videoid) {
if (thePlayer) {
currentVideoDuration = undefined;
var startTimeSeconds = 0;
console.log("poope");
videoTitle.innerHTML = "["+episodelist.episode[video_number].id+"] "+episodelist.episode[video_number].title;
// thePlayer.loadVideoById(video_id[video_number],startTimeSeconds,quality);
console.log("[%s] Que'ing Video "+(video_number+1)+"/"+(video_id.length)+" [v="+video_id[video_number]+"]", new Date().toISOString());
// if we are playing already, just start playing the next video
var curState = thePlayer.getPlayerState();
if (curState == 1 || curState == -1){
isVideoCued = true;
}
thePlayer.cueVideoById(videoid,startTimeSeconds,quality);
}
}
//]]>
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment