Amazon Cloudfront is one of the leading CDN(content deliverly network) providers in the world. Using amazon cloudfront we can stream videos, set pictures and dynamic contents in our website. Amazon will store your videos in edge locations near user’s geographical area and make the access fast and easy. And it will keep the requested files in edge location for a certain time so that frequent calls will be served fast. In this post, we will see how to stream video using amazon cloudfront and flowplayer.
Steps for free streaming videos from Amazon Cloudfront
The basic steps required for Cloudfront video streaming are mentioned below.
- Store the videos and media player files in s3 bucket.
- Create a streaming distribution in Cloudfront.
- Test the video using CloudFront streaming diagnosis.
- Create the html file for testing streaming video.
Let’s go into the detailed steps for amazon streaming.
Creating the Origin :
Origin is the source of the video to be streamed. If we are streaming a video file using cloudfront, the origin can only be Amazon s3 bucket.
1. Firstly, create an Amazon s3 bucket for storing the videos
2. Upload the video to the s3 bucket using aws web interface or s3 fox organizer(mozilla addon)
3. Upload the files of the media player to the same bucket. (Will discuss later in this post)
Origin is the source of the video to be streamed. If we are streaming a video file using cloudfront, the origin can only be Amazon s3 bucket.
1. Firstly, create an Amazon s3 bucket for storing the videos
2. Upload the video to the s3 bucket using aws web interface or s3 fox organizer(mozilla addon)
3. Upload the files of the media player to the same bucket. (Will discuss later in this post)
In this example we are using Flowplayer to play the video. The player files can be downloaded fromhttp://flowplayer.org/download/index.html
The media player files to be uploaded to the bucket are,
The media player files to be uploaded to the bucket are,
- Flowplayer.controls-Version.swf
- Flowplayer-Version.swf
- flowplayer-Version.min.js
- flowplayer.rtmp-Version.swf
The fourth file shown above can be downloaded fromhttp://flowplayer.org/plugins/streaming/rtmp.html#download
NOTE: Change each and every file’s (Not bucket) permissions to public.
NOTE: Change each and every file’s (Not bucket) permissions to public.
Creating the Streaming distribution :
There are two types of distributions in Amazon CloudFront:
Download – Download distribution is for downloading pictures and files. You can upload pictures and files to amazon and create a download distribution. You can use this for showing pictures in websites. This will be more faster than the traditional methods.
There are two types of distributions in Amazon CloudFront:
Download – Download distribution is for downloading pictures and files. You can upload pictures and files to amazon and create a download distribution. You can use this for showing pictures in websites. This will be more faster than the traditional methods.
Streaming – Streaming distribution is for streaming the media files.
Creating the streaming distribution:
Login to AWS -> Cloudfront -> Create Distribution -> Original Domain name(Select s3 bucket name) -> Distribution state ( Enabled ) -> Continue
Login to AWS -> Cloudfront -> Create Distribution -> Original Domain name(Select s3 bucket name) -> Distribution state ( Enabled ) -> Continue
Initially our distribution will under “State” it will say “InProgress“. After 10 or 15 minutes, Amazon CloudFront will finish creating the distribution, at which point it will say “Deployed” We will get a Domain name for the cloudfront streaming distribution we just created. For example, Domain Name: abcdefghijk.cloudfront.net
CloudFront streaming diagnosis :
We can check the video using the following link.
http://d1k5ny0m6d4zlj.cloudfront.net/diag/CFStreamingDiag.html
We can check the video using the following link.
http://d1k5ny0m6d4zlj.cloudfront.net/diag/CFStreamingDiag.html
(Click image for enlarged version)
Creating the html file (sample) :
Create a html file as follows. Change the bucket name and file names
accordingly.
Create a html file as follows. Change the bucket name and file names
accordingly.
- – - – — – - – - – - – - – - – - – - – - – - – - – -
<HTML>
<BODY>
<script src=”http://s3.amazonaws.com/bucketname/flowplayer-Version.min.js”></script>
<style>
a.rtmp {
display:block;
width:640px;
height:360px;
margin:25px 0;
text-align:center;
background-color:black;
}
</style>
<a class=”rtmp” href=”mp4:video_file_name”>
</a>
<script type=”text/javascript”>
$f(“a.rtmp”, “http://s3.amazonaws.com/bucketname/flowplayer-Version.swf”, {
clip: {
provider: ‘rtmp’
}
plugins: {
rtmp: {
url: ‘http://s3.amazonaws.com/bucketname/flowplayer.rtmp-Version.swf’,
netConnectionUrl: ‘rtmp://abcdefghijk.cloudfront.net/cfx/st’
}
}
});
</script>
</BODY>
</HTML>
<BODY>
<script src=”http://s3.amazonaws.com/bucketname/flowplayer-Version.min.js”></script>
<style>
a.rtmp {
display:block;
width:640px;
height:360px;
margin:25px 0;
text-align:center;
background-color:black;
}
</style>
<a class=”rtmp” href=”mp4:video_file_name”>
</a>
<script type=”text/javascript”>
$f(“a.rtmp”, “http://s3.amazonaws.com/bucketname/flowplayer-Version.swf”, {
clip: {
provider: ‘rtmp’
}
plugins: {
rtmp: {
url: ‘http://s3.amazonaws.com/bucketname/flowplayer.rtmp-Version.swf’,
netConnectionUrl: ‘rtmp://abcdefghijk.cloudfront.net/cfx/st’
}
}
});
</script>
</BODY>
</HTML>
- – - – — – - – - – - – - – - – - – - – - – - – - – -
Testing Amazon Video Streaming
Just open the html file we created with a browser and check the video is streaming or not.
Just open the html file we created with a browser and check the video is streaming or not.
If amazon cloudfront streaming is not working for you, please let us know in the comments.
0 comments:
Post a Comment