Created
September 22, 2013 15:06
-
-
Save alisamii/6660827 to your computer and use it in GitHub Desktop.
This file contains 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
<?php | |
// Debug start | |
ini_set('display_errors', 'On'); | |
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED); | |
header('Access-Control-Allow-Origin: *'); | |
$resource = 'http://sp6gqky57m27k.cloudfront.net/' . $_GET['movie']; | |
// default expiry after 5 seconds | |
$expires = time() + (isset($_GET['expires']) ? $_GET['expires'] : 5); | |
// key pair generated for cloudfront | |
$keyPairId = 'APKAIZRN7NY2RZ6EBI4A'; | |
$json = '{"Statement":[{"Resource":"' . $resource . '","Condition":{"DateLessThan":{"AWS:EpochTime":' . $expires . '}}}]}'; | |
// read cloudfront private key pair | |
$fp = fopen('awskeys/pk-' . $keyPairId . '.pem', 'r'); | |
$priv_key = fread($fp, 8192); | |
fclose($fp); | |
// create the private key | |
$key = openssl_get_privatekey($priv_key); | |
// sign the policy with the private key | |
// depending on your php version you might have to use | |
// openssl_sign($json, $signed_policy, $key, OPENSSL_ALGO_SHA1) | |
openssl_sign($json, $signed_policy, $key); | |
openssl_free_key($key); | |
// create url safe signed policy | |
$base64_signed_policy = base64_encode($signed_policy); | |
$signature = str_replace(array('+', '=', '/'), array('-', '_', '~'), $base64_signed_policy); | |
// construct the url | |
$url = $resource . '?Expires=' . $expires . '&Signature=' . $signature . '&Key-Pair-Id=' . $keyPairId; | |
echo $url; | |
?> | |
This file contains 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
<? | |
// Debug start | |
ini_set('display_errors', 'On'); | |
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED); | |
?> | |
<!doctype html> | |
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> | |
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> | |
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> | |
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> | |
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> | |
<head> | |
<meta charset="utf-8"> | |
<meta charset=utf-8> | |
<title>Resonnance | Signed URLS test</title> | |
<!--[if lt IE 9]> HTML5Shiv | |
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
<![endif]--> | |
<!-- 1. jquery library --> | |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
<!-- 2. flowplayer --> | |
<script src="//releases.flowplayer.org/5.4.3/flowplayer.min.js"></script> | |
<!-- 3. skin --> | |
<link rel="stylesheet" href="//releases.flowplayer.org/5.4.3/skin/minimalist.css"> | |
</head> | |
<body> | |
<style> | |
/* normal splash preparation */ | |
#player { | |
background: #777 url(http://flowplayer.org/media/img/demos/minimalist.jpg) no-repeat; | |
background-size: cover; | |
} | |
/* placeholder splash */ | |
#player.splash { | |
position: relative; | |
width: 100%; | |
cursor: pointer; | |
} | |
/* placeholder ratio */ | |
#player.splash .ratio { | |
/* aspect ratio 12/5 -> placeholder ratio 5/12 */ | |
padding-top: 41.67% | |
} | |
/* placeholder play button */ | |
#player.splash .playbutton { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background: url(//releases.flowplayer.org/5.4.3/skin/img/play_white.png) center no-repeat; | |
background-size: 12%; | |
} | |
</style> | |
<script type="text/javascript"> | |
// <![CDATA[ | |
window.onload = function () { | |
// global configuration | |
flowplayer.conf = { | |
splash: true, | |
ratio: 5/12 | |
}; | |
// global api setup | |
flowplayer(function (api) { | |
api.bind("ready", function (e, api, video) { | |
// show video info, for demo only | |
var expiry = new Date(video.src.replace(/.*Expires=(\d+).*/, "$1") * 1000); | |
$(".expires").text(" (expires at " + expiry.toLocaleTimeString() + "):"); | |
$(".signed pre").text(video.url); | |
}).bind("finish", function (e, api) { | |
// before going into splash state | |
// prevent click on container from reloading same url immediately | |
api.disable(true).unload(); | |
}); | |
}); | |
$(function () { | |
var video = $("<video/>"), | |
globaltype = "flash", // fallback to flash | |
globalapi; | |
// determine video type so we need to retrieve only 1 source via ajax | |
// as 3 ajax calls would be very slow and expensive | |
if (flowplayer.support.video) { | |
$(["mp4", "webm", "ogg"]).each(function (i, type) { | |
if (!!video[0].canPlayType("video/" + type).replace("no", "")) { | |
globaltype = type; | |
return false; | |
} | |
}); | |
} | |
$("#player").click(function () { | |
// retrieve url only in (placeholder) splash state | |
if (globalapi === undefined || globalapi.splash) { | |
if (globalapi === undefined) { | |
// fade out placeholder play button to bridge first load period | |
$("#player .playbutton").fadeOut(500); | |
} | |
$.ajax({ | |
// github does not offer php, therefore remote origin | |
url: "getsignedurl.php?expires=400", | |
data: { | |
"movie": "video/0002/0002." + (globaltype !== "flash" ? | |
(globaltype !== "ogg" ? globaltype : "ogv") : "mp4") | |
}, | |
dataType: "text", | |
success: function (data) { | |
if (globalapi === undefined) { | |
// install the player into emptied container | |
$("#player").removeClass().empty().flowplayer({playlist: [data]}); | |
// grab global api handle | |
globalapi = $("#player").data("flowplayer"); | |
console.log(data); | |
} else { | |
// player is already installed, only load clip with new url | |
globalapi.disable(false); | |
console.log('player is already installed'); | |
} | |
globalapi.load(data); | |
} | |
}); | |
} | |
}); | |
}); | |
}; | |
// ]]> | |
</script> | |
<div id="player" class="splash"> | |
<div class="ratio"></div> | |
<div class="playbutton"></div> | |
<div class="signed"></div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment