Created
August 4, 2014 09:06
-
-
Save oliverschloebe/605e7cadda3a376870e1 to your computer and use it in GitHub Desktop.
YouTube JS API Demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment