Using Airbroad Player with Amazon S3 and CloudFront

Introduction

You can stream videos stored on Amazon S3(Simple Storage Service) with Airbroad Player.
This tutorial shows how to configure S3 buckets and Cloudfront Distributions to integrate with Airbroad Player.

Configuring Amazon S3

1. go to CORS configuration page in Amazon S3 console.

2. add Access Control settings in CORS Configuration.

need to add this code below.

...
<CORSRule>
	<AllowedOrigin>http://your_domain</AllowedOrigin>
	<AllowedMethod>GET</AllowedMethod>
	<ExposeHeader>Date</ExposeHeader>
	<ExposeHeader>Content-Length</ExposeHeader>
	<ExposeHeader>Content-Range</ExposeHeader>
	<AllowedHeader>RANGE</AllowedHeader>
</CORSRule>
...

3. grant public read access to your objects

4. copy your file link and embed it into player parameters.

<script type="text/javascript" src="https://yourdomain/airbroad.js"></script>
<div id="airvideo" align="center"><script type="text/javascript">
	var player = airbroad_player({
		"file": ["https://s3.ap-northeast-2.amazonaws.com/airbroadbucket/bbb.mp4", "https://s3.ap-northeast-2.amazonaws.com/airbroadbucket/bbb_720p.mp4", "https://s3.ap-northeast-2.amazonaws.com/airbroadbucket/bbb_360p.mp4"],
		"poster" : "https://s3.ap-northeast-2.amazonaws.com/airbroadbucket/bbb.jpg",
		"file_num" : 2,
		//"width": "100%",
		"height": 540,
		"controls" : "always",
		"autoplay" : false,
		"loop" : true,
		"auto" : true,
		"container" : "airvideo"
		//"start" : 120,
		//"end" : 160,
	});        
</script></div>

Adding CloudFront

You can either stream videos directly from S3, or you can configure CloudFront to get your videos from S3 and distribute them to Airbroad Player.

1. Go to CloudFront Console and Choose “Create Distribution”.
On the first page of the Create Distribution Wizard, in the Web section, choose Get Started.

2. On the second page of the wizard, choose in the Origin Domain Name field, and select the Amazon S3 bucket that you uploaded videos to.

3.  Configure the Behavior Setting as follows.

a) Allowed HTTP Methods : select “GET, HEAD, OPTIONS”
b) Cache Based on selected Request Headers : select “Whitelist”
c) Whitelist Headers : Add “Origin”
d) “Create Distribution” : It takes several minutes for distribution after completing setup.

4. Embed your video URL using CloudFront domain name into player parameters.

For example, if your domain name was airbroad1234.cloudfront.net and your object was bbb.mp4, the video URL would be:
https://airbroad1234.cloudfront.net/bbb.mp4

<script type="text/javascript" src="https://yourdomain/airbroad.js"></script>
<div id="airvideo" align="center">
<script type="text/javascript">
			var player = airbroad_player({
				"file": ["https://airbroad1234.cloudfront.net/bbb.mp4", "https://airbroad1234.cloudfront.net/bbb_720p.mp4", "https://airbroad1234.cloudfront.net/bbb_360p.mp4"],
				"poster" : "https://airbroad1234.cloudfront.net/abc.jpg",
				"file_num" : 2,
				//"width": "100%",
				"height": 540,
				"controls" : "always",
				"autoplay" : false,
				"loop" : true,
				"auto" : true,
				"container" : “airvideo”
				//"start" : 120,
				//"end" : 160,
			});
</script></div>