bbbrrriiiaaannn · July 20, 2017 17:11
diff --git a/apollo-11.html b/apollo-11.html
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <!--

 Hello! So here's how this page works...basically it's like a circa-1969 TV. When loaded, it displays a title card (apollo-tv-title-card.jpg) that says when the coverage starts. Then when the time is "July 20, {current year} 16:10:30 PM EDT", the first video (from "videoIds") starts playing. That video ends and the title card is displayed again. When the time is "July 20, {current year} 22:51:27 PM EDT", the second video starts and then the six remaining videos are shown right after that in succession. If the page is loaded at any point during the broadcast, the proper video will start playing at the proper time (just like you've turned on the TV for a live event). At the end, the title card will be displayed again.

 The old YT player API is deprecated...the new one is here:

 https://developers.google.com/youtube/iframe_api_reference

 I'd prefer that you not use extensive frameworks that need to be loaded in (jquery is fine...you can point to "http://kottke.org/templates/2016/js/jquery-1.11.3.min.js"), but I will take something that works over nothing.

 You shouldn't have to do anything with the CSS or HTML (beyond changing ids or classes if you need to).

 If you need any more info, email me ([email protected]) or @ me on Twitter (@jkottke). Thx!

 P.S. This JS is terrible. Don't laugh too much, pls!

 -->


 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 <title>Apollo 11 Live TV Coverage</title>

 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" /> <!-- TODO: 404ing -->

 <style type="text/css">

 	body {
 		padding: 0;
 		margin: 0;
 		background-image:url('http://kottke.org/plus/misc/images/apollo-tv-back-big.jpg');
 		background-repeat:no-repeat;
 		background-color: #ffa104;
 		color: #000000;
 	}

 	.fa {
 		position:absolute;
 		left:25px;
 		top:25px;
 		z-index: 100;
 		font-size: 48px;
 	}

 	#tvframe {
 		position:absolute;
 		left:142px;
 		top:133px;
 		z-index: 1000;
 	}

 	#tvside {
 		position:absolute;
 		left:767px;
 		top:255px;
 		z-index: 100;
 	}

 	#ytplay {
 		position:absolute;
 		left:176px;
 		top:161px;
 		z-index: 5;
 		visibility:visible;
 	}

 	#showover {
 		position:absolute;
 		left:163px;
 		top:161px;
 		z-index: 15;
 	}

 	#spacer {
 		position:absolute;
 		left:0px;
 		top:900px;
 		z-index: 1;
 	}

 </style>

 </head>
 <body id="kottke-org">

 <a href="http://kottke.org/09/07/apollo-11-live-tv-coverage" target="_blank"><i class="fa fa-info-circle" style="color:#ffff00;"></i></a>

 <img src="http://kottke.org/plus/misc/images/apollo-tv-frame-big.png" width="611" height="477" border="0" alt="TV" id="tvframe" />

 <img src="http://kottke.org/plus/misc/images/apollo-tv-title-card.jpg" width="564" height="417" border="0" id="showover" />

 <div id="ytplay"><div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div></div>


 <div id="spacer">&nbsp;</div>

 <script type="text/javascript">

 /*
 	Landing
 	July 20, 2009 16:10:30 PM EDT
 	
 	Excursion
 	July 20, 2009 22:51:27 PM EDT

 */

 	var start_time = Date.parse("20 July " + new Date().getFullYear() + " 16:10:30 EDT");
 	// var start_time = Date.parse("20 July " + new Date().getFullYear() + " 13:08:30 EDT");
 	
 	var videoIds = new Array("sJv5_y2l5as","WQDjy2csPP0","P5LaQVRhohg","yMeUV3Ueiu8","ApGUXWI5pzo","jLV3VgBgZgM","FwZPLfFcYoA","nuRA2BUA27g");

 	var playDates = new Array(0,24057000,24656000,24929000,25529000,26128000,26728000,27322000);
 	var playDatesEnd = new Array(585000,24656000,24929000,25529000,26128000,26728000,27322000,27918000);

 	var countdown;
 	
 	function onYouTubePlayerReady(playerId) {
 		ready();
 	}

 	function ready() {
 		var d = new Date();
 		var now = d.getTime();

 		if ((start_time > now) && !countdown) {
 			countdown = setInterval("ready()",1000);
 //			alert("too early");
 		}
 		else if (((start_time + playDates[0]) < now) && ((start_time + playDatesEnd[0]) > now))
 		{
 			if (countdown) {
 //				alert(countdown);
 				window.clearInterval(countdown);
 			}
 //			alert("Gonna play video 1");
 			goEagle(videoIds[0],Math.round((now - (start_time + playDates[0]))/1000));
 		}
 		else if (((start_time + playDatesEnd[0]) < now) && ((start_time + playDates[1]) > now) && !countdown)
 		{
 			ytplayer.clearVideo();
 			document.getElementById('showover').style.visibility = 'visible';
 			countdown = setInterval("ready()",1000);
 //			alert("In between");
 		}
 		else if (((start_time + playDates[1]) < now) && ((start_time + playDatesEnd[1]) > now))
 		{
 			if (countdown) {
 //				alert(countdown);
 				window.clearInterval(countdown);
 			}
 			//alert("Gonna play video 2");
 			goEagle(videoIds[1],Math.round((now - (start_time + playDates[1]))/1000));
 		}
 		else if (((start_time + playDates[2]) < now) && ((start_time + playDatesEnd[2]) > now))
 		{
 			//alert("Gonna play video 3");
 			goEagle(videoIds[2],Math.round((now - (start_time + playDates[2]))/1000));
 		}
 		else if (((start_time + playDates[3]) < now) && ((start_time + playDatesEnd[3]) > now))
 		{
 //			alert("Gonna play video 4");
 			goEagle(videoIds[3],Math.round((now - (start_time + playDates[3]))/1000));
 		}
 		else if (((start_time + playDates[4]) < now) && ((start_time + playDatesEnd[4]) > now))
 		{
 //			alert("Gonna play video 5");
 			goEagle(videoIds[4],Math.round((now - (start_time + playDates[4]))/1000));
 		}
 		else if (((start_time + playDates[5]) < now) && ((start_time + playDatesEnd[5]) > now))
 		{
 //			alert("Gonna play video 6");
 			goEagle(videoIds[5],Math.round((now - (start_time + playDates[5]))/1000));
 		}
 		else if (((start_time + playDates[6]) < now) && ((start_time + playDatesEnd[6]) > now))
 		{
 //			alert("Gonna play video 7");
 			goEagle(videoIds[6],Math.round((now - (start_time + playDates[6]))/1000));
 		}
 		else if (((start_time + playDates[7]) < now) && ((start_time + playDatesEnd[7]) > now))
 		{
 //			alert("Gonna play video 8");
 			goEagle(videoIds[7],Math.round((now - (start_time + playDates[7]))/1000));
 		}
 		else if (((start_time + playDatesEnd[7]) < now))
 		{
 			document.getElementById('showover').style.visibility = 'visible';
 		}
 	}


 	function goEagle(vidId,diff) {

 		if (ytplayer) {			
 			//alert ("diff: " + diff);
 			document.getElementById('showover').style.visibility = 'hidden';
 			ytplayer.loadVideoById(vidId,diff);
 		}
 		else {
 			alert("Error. Please reload page.");
 		}			

 	} 



 	function onytplayerStateChange(newState) {
 		if (newState == 0) {
 			ready();
 		} 
 	}

 	function onPlayerError(errorCode) 
 		{
 			alert("Error. Please reload page.");
 		}
 </script>

 <script>
    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var ytplayer;
    function onYouTubeIframeAPIReady() {
      ytplayer = new YT.Player('ytapiplayer', {
        height: '416',
        width: '560',
        events: {
          'onReady': onYouTubePlayerReady,
          'onStateChange': onytplayerStateChange,
          'onError': onPlayerError
        }
      });
    }

 </script>

 <script type="text/javascript"> /* write analytics tag */
 	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
 	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
 </script>
 <script type="text/javascript"> /* fire analytics tag */
 	try {
 		var pageTracker = _gat._getTracker("UA-871179-1");
 		pageTracker._trackPageview();
 	} catch(err) {}
 </script>

 </body>
 </html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

	<!--

	Hello! So here's how this page works...basically it's like a circa-1969 TV. When loaded, it displays a title card (apollo-tv-title-card.jpg) that says when the coverage starts. Then when the time is "July 20, {current year} 16:10:30 PM EDT", the first video (from "videoIds") starts playing. That video ends and the title card is displayed again. When the time is "July 20, {current year} 22:51:27 PM EDT", the second video starts and then the six remaining videos are shown right after that in succession. If the page is loaded at any point during the broadcast, the proper video will start playing at the proper time (just like you've turned on the TV for a live event). At the end, the title card will be displayed again.

	The old YT player API is deprecated...the new one is here:

	https://developers.google.com/youtube/iframe_api_reference

	I'd prefer that you not use extensive frameworks that need to be loaded in (jquery is fine...you can point to "http://kottke.org/templates/2016/js/jquery-1.11.3.min.js"), but I will take something that works over nothing.

	You shouldn't have to do anything with the CSS or HTML (beyond changing ids or classes if you need to).

	If you need any more info, email me ([email protected]) or @ me on Twitter (@jkottke). Thx!

	P.S. This JS is terrible. Don't laugh too much, pls!

	-->


	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Apollo 11 Live TV Coverage</title>

	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" /> <!-- TODO: 404ing -->

	<style type="text/css">

	body {
	padding: 0;
	margin: 0;
	background-image:url('http://kottke.org/plus/misc/images/apollo-tv-back-big.jpg');
	background-repeat:no-repeat;
	background-color: #ffa104;
	color: #000000;
	}

	.fa {
	position:absolute;
	left:25px;
	top:25px;
	z-index: 100;
	font-size: 48px;
	}

	#tvframe {
	position:absolute;
	left:142px;
	top:133px;
	z-index: 1000;
	}

	#tvside {
	position:absolute;
	left:767px;
	top:255px;
	z-index: 100;
	}

	#ytplay {
	position:absolute;
	left:176px;
	top:161px;
	z-index: 5;
	visibility:visible;
	}

	#showover {
	position:absolute;
	left:163px;
	top:161px;
	z-index: 15;
	}

	#spacer {
	position:absolute;
	left:0px;
	top:900px;
	z-index: 1;
	}

	</style>

	</head>
	<body id="kottke-org">

	<a href="http://kottke.org/09/07/apollo-11-live-tv-coverage" target="_blank"><i class="fa fa-info-circle" style="color:#ffff00;"></i></a>

	<img src="http://kottke.org/plus/misc/images/apollo-tv-frame-big.png" width="611" height="477" border="0" alt="TV" id="tvframe" />

	<img src="http://kottke.org/plus/misc/images/apollo-tv-title-card.jpg" width="564" height="417" border="0" id="showover" />

	<div id="ytplay"><div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div></div>


	<div id="spacer"> </div>

	<script type="text/javascript">

	/*
	Landing
	July 20, 2009 16:10:30 PM EDT

	Excursion
	July 20, 2009 22:51:27 PM EDT

	*/

	var start_time = Date.parse("20 July " + new Date().getFullYear() + " 16:10:30 EDT");
	// var start_time = Date.parse("20 July " + new Date().getFullYear() + " 13:08:30 EDT");

	var videoIds = new Array("sJv5_y2l5as","WQDjy2csPP0","P5LaQVRhohg","yMeUV3Ueiu8","ApGUXWI5pzo","jLV3VgBgZgM","FwZPLfFcYoA","nuRA2BUA27g");

	var playDates = new Array(0,24057000,24656000,24929000,25529000,26128000,26728000,27322000);
	var playDatesEnd = new Array(585000,24656000,24929000,25529000,26128000,26728000,27322000,27918000);

	var countdown;

	function onYouTubePlayerReady(playerId) {
	ready();
	}

	function ready() {
	var d = new Date();
	var now = d.getTime();

	if ((start_time > now) && !countdown) {
	countdown = setInterval("ready()",1000);
	// alert("too early");
	}
	else if (((start_time + playDates[0]) < now) && ((start_time + playDatesEnd[0]) > now))
	{
	if (countdown) {
	// alert(countdown);
	window.clearInterval(countdown);
	}
	// alert("Gonna play video 1");
	goEagle(videoIds[0],Math.round((now - (start_time + playDates[0]))/1000));
	}
	else if (((start_time + playDatesEnd[0]) < now) && ((start_time + playDates[1]) > now) && !countdown)
	{
	ytplayer.clearVideo();
	document.getElementById('showover').style.visibility = 'visible';
	countdown = setInterval("ready()",1000);
	// alert("In between");
	}
	else if (((start_time + playDates[1]) < now) && ((start_time + playDatesEnd[1]) > now))
	{
	if (countdown) {
	// alert(countdown);
	window.clearInterval(countdown);
	}
	//alert("Gonna play video 2");
	goEagle(videoIds[1],Math.round((now - (start_time + playDates[1]))/1000));
	}
	else if (((start_time + playDates[2]) < now) && ((start_time + playDatesEnd[2]) > now))
	{
	//alert("Gonna play video 3");
	goEagle(videoIds[2],Math.round((now - (start_time + playDates[2]))/1000));
	}
	else if (((start_time + playDates[3]) < now) && ((start_time + playDatesEnd[3]) > now))
	{
	// alert("Gonna play video 4");
	goEagle(videoIds[3],Math.round((now - (start_time + playDates[3]))/1000));
	}
	else if (((start_time + playDates[4]) < now) && ((start_time + playDatesEnd[4]) > now))
	{
	// alert("Gonna play video 5");
	goEagle(videoIds[4],Math.round((now - (start_time + playDates[4]))/1000));
	}
	else if (((start_time + playDates[5]) < now) && ((start_time + playDatesEnd[5]) > now))
	{
	// alert("Gonna play video 6");
	goEagle(videoIds[5],Math.round((now - (start_time + playDates[5]))/1000));
	}
	else if (((start_time + playDates[6]) < now) && ((start_time + playDatesEnd[6]) > now))
	{
	// alert("Gonna play video 7");
	goEagle(videoIds[6],Math.round((now - (start_time + playDates[6]))/1000));
	}
	else if (((start_time + playDates[7]) < now) && ((start_time + playDatesEnd[7]) > now))
	{
	// alert("Gonna play video 8");
	goEagle(videoIds[7],Math.round((now - (start_time + playDates[7]))/1000));
	}
	else if (((start_time + playDatesEnd[7]) < now))
	{
	document.getElementById('showover').style.visibility = 'visible';
	}
	}


	function goEagle(vidId,diff) {

	if (ytplayer) {
	//alert ("diff: " + diff);
	document.getElementById('showover').style.visibility = 'hidden';
	ytplayer.loadVideoById(vidId,diff);
	}
	else {
	alert("Error. Please reload page.");
	}

	}



	function onytplayerStateChange(newState) {
	if (newState == 0) {
	ready();
	}
	}

	function onPlayerError(errorCode)
	{
	alert("Error. Please reload page.");
	}
	</script>

	<script>
	// 2. This code loads the IFrame Player API code asynchronously.
	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	// 3. This function creates an <iframe> (and YouTube player)
	// after the API code downloads.
	var ytplayer;
	function onYouTubeIframeAPIReady() {
	ytplayer = new YT.Player('ytapiplayer', {
	height: '416',
	width: '560',
	events: {
	'onReady': onYouTubePlayerReady,
	'onStateChange': onytplayerStateChange,
	'onError': onPlayerError
	}
	});
	}

	</script>

	<script type="text/javascript"> /* write analytics tag */
	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
	</script>
	<script type="text/javascript"> /* fire analytics tag */
	try {
	var pageTracker = _gat._getTracker("UA-871179-1");
	pageTracker._trackPageview();
	} catch(err) {}
	</script>

	</body>
	</html>