oliverschloebe/yt-api.html

## yt-api.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../../favicon.ico">

    <title>Martin's Pr0n Streams</title>

    <!-- Bootstrap core CSS -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="pr0n-narrow.css" rel="stylesheet">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script id="jqueryui" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer async></script>
    <script src="//www.google.com/jsapi?key=AIzaSyCZfHRnq7tigC-COeQRmoa9Cxr0vbrK6xw"></script>

    <script src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("swfobject", "2.1");
    </script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="container">
      <div class="header">
        <ul class="nav nav-pills pull-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Darstellerinnen</a></li>
          <li><a href="#">Mitgliedschaft :-)</a></li>
        </ul>
        <h3 class="text-muted">Martin's Pr0n Streams</h3>
      </div>

      <div class="jumbotron">
        <h1>Warum liegt da Stroh?</h1>
        <p class="lead">Wieso hast du 'ne Maske auf...?</p>

        <div id="flashplayer-wrapper" style="width:580px;height:326px;">
          <div id="ytflashplayer">You need Flash player 9+ and JavaScript enabled to view this video.</div>
        </div>
        <div id="html5player-wrapper">
          <div id="myythtml5player"></div>
        </div>

        <?php
        $curtime = time();
        $start_tstamp = mktime(17, 0, 0, date('m'), date('d'), date('Y'));
        $end_tstamp = mktime(23, 0, 0, date('m'), date('d'), date('Y'));
        $time_offset = $curtime-$start_tstamp;
        #echo date('d.m.Y H:i:s', $start_tstamp);
        ?>

        <?php if( time() >= $start_tstamp && time() <= $end_tstamp ) { ?>
	        <script type="text/javascript">
		    // <![CDATA[
	        function secondsToString(seconds) {
		        var numhours = Math.floor(((seconds % 31536000) % 86400) / 3600);
		        var numminutes = Math.floor((((seconds % 31536000) % 86400) % 3600) / 60);
		        var numseconds = Math.floor((((seconds % 31536000) % 86400) % 3600) % 60);
		        return numhours + ":" + numminutes + ":" + numseconds + "min";
	        }

	        function updateHTML(elmId, value) {
				document.getElementById(elmId).innerHTML = value;
			}

	        function updatePlayerInfo() {
				if( ytplayer && ytplayer.getDuration ) {
	        	    updateHTML("videoDuration", secondsToString(ytplayer.getDuration()));
	        	    updateHTML("videoCurrentTime", secondsToString(ytplayer.getCurrentTime()));
				} else {
					//alert('Lala');
				}
			}

	        function onYouTubePlayerReady(playerId) {
	        	  ytplayer = document.getElementById("myytflashplayer");
	        	  setInterval(updatePlayerInfo, 250);
	        	  updatePlayerInfo();
	        	  ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
	        	  ytplayer.addEventListener("onError", "onPlayerError");
			}

	        function loadPlayer() {
			    var baseUrl = 'https://www.youtube.com/';
			    var swfUrl = 'https://www.youtube.com/v/wZZ7oFKsKzY?version=3&enablejsapi=1&playerapiid=ytplayer';

			    var params = { allowScriptAccess: "always", bgcolor: "#EEEEEE" };

			    var atts = { id: "myytflashplayer" };
			    var flashvars = { autoplay: 1, controls: 0, modestbranding: 1, rel: 0, showinfo: 0, theme: 'light', start: <?php echo $time_offset; ?> };
			    swfobject.embedSWF(
					swfUrl, "ytflashplayer", "580", "326", "9", null, flashvars, params, atts
				);
	        }

		    function _run() {
				loadPlayer();
			}

		    google.setOnLoadCallback(_run);
		    //]]>
		    </script>

		    <p>Aktuelle Dauer: <span id="videoCurrentTime">--:--</span> | Dauer gesamt: <span id="videoDuration">--:--</span></p>
        <?php } else { ?>
	        <script type="text/javascript">
		    // <![CDATA[
			jQuery('#ytflashplayer').html('<img src="http://placehold.it/550x350/428BCA/ffffff&text=Dieses%20Video%20startet%20erst%20<?php echo urlencode(date('H:i', $start_tstamp)); ?>%20Uhr" alt="" />');
		    //]]>
		    </script>
        <?php } ?>
      </div>

      <div class="row marketing">
        <div class="col-lg-6">
          <h4>Start</h4>
          <p>17 Uhr</p>

          <h4>Speaker</h4>
          <p>Chuck Norris</p>
        </div>

        <div class="col-lg-6">
          <h4>Verfügbar</h4>
          <p>17-23 Uhr</p>

          <h4>Thema</h4>
          <p>Warum liegt da Stroh?</p>
        </div>
      </div>

      <div class="footer">
        <p>&copy; Company 2014</p>
      </div>

    </div> <!-- /container -->

  <script src="https://www.youtube.com/player_api" type="text/javascript"></script>

  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="../../favicon.ico">

	<title>Martin's Pr0n Streams</title>

	<!-- Bootstrap core CSS -->
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

	<!-- Custom styles for this template -->
	<link href="pr0n-narrow.css" rel="stylesheet">

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script id="jqueryui" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer async></script>
	<script src="//www.google.com/jsapi?key=AIzaSyCZfHRnq7tigC-COeQRmoa9Cxr0vbrK6xw"></script>

	<script src="//www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load("swfobject", "2.1");
	</script>

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	</head>

	<body>

	<div class="container">
	<div class="header">
	<ul class="nav nav-pills pull-right">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">Darstellerinnen</a></li>
	<li><a href="#">Mitgliedschaft :-)</a></li>
	</ul>
	<h3 class="text-muted">Martin's Pr0n Streams</h3>
	</div>

	<div class="jumbotron">
	<h1>Warum liegt da Stroh?</h1>
	<p class="lead">Wieso hast du 'ne Maske auf...?</p>

	<div id="flashplayer-wrapper" style="width:580px;height:326px;">
	<div id="ytflashplayer">You need Flash player 9+ and JavaScript enabled to view this video.</div>
	</div>
	<div id="html5player-wrapper">
	<div id="myythtml5player"></div>
	</div>

	<?php
	$curtime = time();
	$start_tstamp = mktime(17, 0, 0, date('m'), date('d'), date('Y'));
	$end_tstamp = mktime(23, 0, 0, date('m'), date('d'), date('Y'));
	$time_offset = $curtime-$start_tstamp;
	#echo date('d.m.Y H:i:s', $start_tstamp);
	?>

	<?php if( time() >= $start_tstamp && time() <= $end_tstamp ) { ?>
	<script type="text/javascript">
	// <![CDATA[
	function secondsToString(seconds) {
	var numhours = Math.floor(((seconds % 31536000) % 86400) / 3600);
	var numminutes = Math.floor((((seconds % 31536000) % 86400) % 3600) / 60);
	var numseconds = Math.floor((((seconds % 31536000) % 86400) % 3600) % 60);
	return numhours + ":" + numminutes + ":" + numseconds + "min";
	}

	function updateHTML(elmId, value) {
	document.getElementById(elmId).innerHTML = value;
	}

	function updatePlayerInfo() {
	if( ytplayer && ytplayer.getDuration ) {
	updateHTML("videoDuration", secondsToString(ytplayer.getDuration()));
	updateHTML("videoCurrentTime", secondsToString(ytplayer.getCurrentTime()));
	} else {
	//alert('Lala');
	}
	}

	function onYouTubePlayerReady(playerId) {
	ytplayer = document.getElementById("myytflashplayer");
	setInterval(updatePlayerInfo, 250);
	updatePlayerInfo();
	ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
	ytplayer.addEventListener("onError", "onPlayerError");
	}

	function loadPlayer() {
	var baseUrl = 'https://www.youtube.com/';
	var swfUrl = 'https://www.youtube.com/v/wZZ7oFKsKzY?version=3&enablejsapi=1&playerapiid=ytplayer';

	var params = { allowScriptAccess: "always", bgcolor: "#EEEEEE" };

	var atts = { id: "myytflashplayer" };
	var flashvars = { autoplay: 1, controls: 0, modestbranding: 1, rel: 0, showinfo: 0, theme: 'light', start: <?php echo $time_offset; ?> };
	swfobject.embedSWF(
	swfUrl, "ytflashplayer", "580", "326", "9", null, flashvars, params, atts
	);
	}

	function _run() {
	loadPlayer();
	}

	google.setOnLoadCallback(_run);
	//]]>
	</script>

	<p>Aktuelle Dauer: <span id="videoCurrentTime">--:--</span> \| Dauer gesamt: <span id="videoDuration">--:--</span></p>
	<?php } else { ?>
	<script type="text/javascript">
	// <![CDATA[
	jQuery('#ytflashplayer').html('<img src="http://placehold.it/550x350/428BCA/ffffff&text=Dieses%20Video%20startet%20erst%20<?php echo urlencode(date('H:i', $start_tstamp)); ?>%20Uhr" alt="" />');
	//]]>
	</script>
	<?php } ?>
	</div>

	<div class="row marketing">
	<div class="col-lg-6">
	<h4>Start</h4>
	<p>17 Uhr</p>

	<h4>Speaker</h4>
	<p>Chuck Norris</p>
	</div>

	<div class="col-lg-6">
	<h4>Verfügbar</h4>
	<p>17-23 Uhr</p>

	<h4>Thema</h4>
	<p>Warum liegt da Stroh?</p>
	</div>
	</div>

	<div class="footer">
	<p>© Company 2014</p>
	</div>

	</div> <!-- /container -->

	<script src="https://www.youtube.com/player_api" type="text/javascript"></script>

	</body>
	</html>