foozlereducer · May 12, 2020 19:52
diff --git a/sandbox1.php b/sandbox1.php
 <?php
    header("Access-Control-Allow-Origin: *");
    header('Access-Control-Allow-Credentials', 'true');

    $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";
    $mp4_url = 'https://cdn2.dev1.markmeldrum.com/c4ecdaf5-5f26-4e5b-83d5-929c4345c48d/mp4/Big+Buck+Bunny+60fps+4K+-+Official+Blender+Foundation+Short+Film_Mp4_Avc_Aac_16x9_1280x720p_24Hz_4.5Mbps_qvbr.mp4';
   

    $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 with an mp4 fallback
        let primary_source;
        let fallback_source = "<?php echo $mp4_url?>";

        switch ( browserDetection() ) {
            case 'firefox':
            case 'chrome':
                primary_source = "<?php echo $mpd_url?>";
                break;
            case 'safari':
                primary_source = "<?php echo $m3u8_url?>";
                break;
            default:
                primary_source = "<?php echo $mpd_url?>";
        }
        
        const player = jwplayer('player').setup({
            playlist: [{
                sources: [
                    {
                    file: primary_source
                    },
                    {
                    file: fallback_source
                    },
                    
                ]
            }],
            withCredentials:true,
            playbackRateControls: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2]
        });
    </script>
 </body>
 </html>
	<?php
	header("Access-Control-Allow-Origin: *");
	header('Access-Control-Allow-Credentials', 'true');

	$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";
	$mp4_url = 'https://cdn2.dev1.markmeldrum.com/c4ecdaf5-5f26-4e5b-83d5-929c4345c48d/mp4/Big+Buck+Bunny+60fps+4K+-+Official+Blender+Foundation+Short+Film_Mp4_Avc_Aac_16x9_1280x720p_24Hz_4.5Mbps_qvbr.mp4';


	$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 with an mp4 fallback
	let primary_source;
	let fallback_source = "<?php echo $mp4_url?>";

	switch ( browserDetection() ) {
	case 'firefox':
	case 'chrome':
	primary_source = "<?php echo $mpd_url?>";
	break;
	case 'safari':
	primary_source = "<?php echo $m3u8_url?>";
	break;
	default:
	primary_source = "<?php echo $mpd_url?>";
	}

	const player = jwplayer('player').setup({
	playlist: [{
	sources: [
	{
	file: primary_source
	},
	{
	file: fallback_source
	},

	]
	}],
	withCredentials:true,
	playbackRateControls: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2]
	});
	</script>
	</body>
	</html>