Skip to content

Instantly share code, notes, and snippets.

@alisamii
Created September 22, 2013 15:06
Show Gist options
  • Save alisamii/6660827 to your computer and use it in GitHub Desktop.
Save alisamii/6660827 to your computer and use it in GitHub Desktop.
<?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;
?>
<?
// 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