foozlereducer · May 19, 2020 20:34
diff --git a/sandbox2.php b/sandbox2.php
 <?php
    header('Access-Control-Allow-Credentials', 'true');
    header('Access-Control-Allow-Methods',  "GET, HEAD, OPTIONS");
    header('Range: 1024-1048576');
    header('Content-Range: 1024-1048576');

    $expires = time() + 600;
    $key_pair_id = "APKAIE5VAVJWUKZ22KOQ";
    $pk = WP_CONTENT_DIR . '/plugins/_library/pk-APKAIE5VAVJWUKZ22KOQ.pem';

    $logo_url = 'https://cdn2.dev1.markmeldrum.com/logo_large.png';
    $m3u8_url = 'https://cdn2.dev1.markmeldrum.com/c4ecdaf5-5f26-4e5b-83d5-929c4345c48d/hls/Big+Buck+Bunny+60fps+4K+-+Official+Blender+Foundation+Short+Film.m3u8';
    $mpd_url = "https://cdn2.dev1.markmeldrum.com/c4ecdaf5-5f26-4e5b-83d5-929c4345c48d/dash/Big+Buck+Bunny+60fps+4K+-+Official+Blender+Foundation+Short+Film.mpd";
   
    $customPolicy = <<<POLICY
    {
        "Statement": [
            {
                "Resource": "https://*",
                "Condition": {
                    "DateLessThan": {"AWS:EpochTime": {$expires}}
                }
            }
        ]
    }
 POLICY;
    
    require_once(WP_CONTENT_DIR . '/plugins/_library/aws/aws-autoloader.php' );
    // Create a CloudFront Client
    $client = new Aws\CloudFront\CloudFrontClient([
        'profile' => 'default',
        'version' => 'latest',
        'region' => 'us-east-1'
    ]);
    // Create a signed cookie for the resource using a custom policy
    $signedCookieCustomPolicy = $client->getSignedCookie([
        'policy' => $customPolicy,
        'private_key' => $pk,
        'key_pair_id' => $key_pair_id
    ]);

    foreach ($signedCookieCustomPolicy as $name => $value) {
        setcookie($name, $value, $expires, "/", ".dev1.markmeldrum.com", true, true);
    }  
 ?>
 <!DOCTYPE html>
 <html>
 <head>
    <title>Sandbox2.php</title>
    <script src="https://cdn.jwplayer.com/libraries/tihSszEY.js"></script>
    <style>
        /* Hide the default rewind, close captioning both the main bar and in the setting sub menu */
        .jw-icon-rewind, .jw-icon-cc, .jw-settings-captions, .jw-settings-submenu-captions {
            display:none !important;
        }
        h1 { text-align: center }
        article #player {
            margin: 0 auto;
        }
        article.video {
            border: 8px solid #444;
            padding: 4px 4px 4px 4px;
        }
    </style>
 </head>
 <body>
    <h1>Mark Meldrum AWS Cloudfront Troubleshooting</h1>
    <article class="video">
        <img src="<?php echo $logo_url ?>" />
        <div id="player">Loading the player...</div>
    </article>

    <script>
        const browserDetection = () => {
            const browsers = {
                firefox: !!window.InstallTrigger,
                safari: !!window.ApplePaySession,
                opera: window.opr && !!window.opr.addons,
                chrome: window.chrome && !!window.chrome.webstore
            };

            return Object.keys(browsers).find(key => browsers[key] === true);
        };
        
        // video source fallback not working in jwplayer, if m3u8 is first then firefox tries and errors out
        // these lines of code will choose 1 primary source
        let primary_source;
        ( 'safari' === browserDetection() ) ?  primary_source = "<?php echo $m3u8_url?>" : primary_source = "<?php echo $mpd_url?>";
        
        const player = jwplayer('player').setup({
            playlist: [{
                sources: [
                    {
                    file: primary_source
                    }
                ]
            }],
            withCredentials:true,
            playbackRateControls: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2]
        });
    </script>
 </body>
 </html>
	<?php
	header('Access-Control-Allow-Credentials', 'true');
	header('Access-Control-Allow-Methods', "GET, HEAD, OPTIONS");
	header('Range: 1024-1048576');
	header('Content-Range: 1024-1048576');

	$expires = time() + 600;
	$key_pair_id = "APKAIE5VAVJWUKZ22KOQ";
	$pk = WP_CONTENT_DIR . '/plugins/_library/pk-APKAIE5VAVJWUKZ22KOQ.pem';

	$logo_url = 'https://cdn2.dev1.markmeldrum.com/logo_large.png';
	$m3u8_url = 'https://cdn2.dev1.markmeldrum.com/c4ecdaf5-5f26-4e5b-83d5-929c4345c48d/hls/Big+Buck+Bunny+60fps+4K+-+Official+Blender+Foundation+Short+Film.m3u8';
	$mpd_url = "https://cdn2.dev1.markmeldrum.com/c4ecdaf5-5f26-4e5b-83d5-929c4345c48d/dash/Big+Buck+Bunny+60fps+4K+-+Official+Blender+Foundation+Short+Film.mpd";

	$customPolicy = <<<POLICY
	{
	"Statement": [
	{
	"Resource": "https://*",
	"Condition": {
	"DateLessThan": {"AWS:EpochTime": {$expires}}
	}
	}
	]
	}
	POLICY;

	require_once(WP_CONTENT_DIR . '/plugins/_library/aws/aws-autoloader.php' );
	// Create a CloudFront Client
	$client = new Aws\CloudFront\CloudFrontClient([
	'profile' => 'default',
	'version' => 'latest',
	'region' => 'us-east-1'
	]);
	// Create a signed cookie for the resource using a custom policy
	$signedCookieCustomPolicy = $client->getSignedCookie([
	'policy' => $customPolicy,
	'private_key' => $pk,
	'key_pair_id' => $key_pair_id
	]);

	foreach ($signedCookieCustomPolicy as $name => $value) {
	setcookie($name, $value, $expires, "/", ".dev1.markmeldrum.com", true, true);
	}
	?>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Sandbox2.php</title>
	<script src="https://cdn.jwplayer.com/libraries/tihSszEY.js"></script>
	<style>
	/* Hide the default rewind, close captioning both the main bar and in the setting sub menu */
	.jw-icon-rewind, .jw-icon-cc, .jw-settings-captions, .jw-settings-submenu-captions {
	display:none !important;
	}
	h1 { text-align: center }
	article #player {
	margin: 0 auto;
	}
	article.video {
	border: 8px solid #444;
	padding: 4px 4px 4px 4px;
	}
	</style>
	</head>
	<body>
	<h1>Mark Meldrum AWS Cloudfront Troubleshooting</h1>
	<article class="video">
	<img src="<?php echo $logo_url ?>" />
	<div id="player">Loading the player...</div>
	</article>

	<script>
	const browserDetection = () => {
	const browsers = {
	firefox: !!window.InstallTrigger,
	safari: !!window.ApplePaySession,
	opera: window.opr && !!window.opr.addons,
	chrome: window.chrome && !!window.chrome.webstore
	};

	return Object.keys(browsers).find(key => browsers[key] === true);
	};

	// video source fallback not working in jwplayer, if m3u8 is first then firefox tries and errors out
	// these lines of code will choose 1 primary source
	let primary_source;
	( 'safari' === browserDetection() ) ? primary_source = "<?php echo $m3u8_url?>" : primary_source = "<?php echo $mpd_url?>";

	const player = jwplayer('player').setup({
	playlist: [{
	sources: [
	{
	file: primary_source
	}
	]
	}],
	withCredentials:true,
	playbackRateControls: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2]
	});
	</script>
	</body>
	</html>