Amazon CloudFront CDNs and video platforms - Demo 1 / 2
Introduction
This shows how to do RTMP streaming from the Amazon CloudFront CDN. To configure Flowplayer for CloudFront you need to do two things:
- Set the clip URL to point to your video file in your Amazon S3 bucket.
- Configure the RTMP plugin's netConnectionUrl to point to your CloudFront domain.
Amazon has a great tutorial on how to setup Flowplayer streaming with Cloudfront.
HTML coding
The clip URL is defined in the href below. This corresponds to the video file name and location in the Amazon S3 bucket. The file is located in the bucket's root and the href value is therefore flowplayer-700. If the file was in a folder called examples the value to be used in the href would be examples/flowplayer-700.
<!--
href points to the video file in our CloudFront bucket.
Amazon CloudFront uses the Adobe's RTMP server and therefore
we remove the file extension .flv from the url
-->
<a href="flowplayer-700"
style="display:block;width:425px;height:300px;"
id="rtmpPlayer">
<!-- splash image inside the container -->
<img src="/img/home/flow_eye.jpg" alt="Search engine friendly content" />
</a>
CloudFront uses the Adobe's FCS server (Flash Communication Server) and FCS does not like the file extension in the clip's URL so you should not include it in the clip URL value. So we have 'flowplayer-700' even when the file is actually named 'flowplayer-700.flv' in our bucket.
Flowplayer configuration
We use the RTMP plugin to stream from the RTMP servers running in the Amazon cloud. The netConnectionUrl value contains your CloudFront domain name followed by characters cfx/st.
flowplayer("rtmpPlayer", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
// configure the required plugins
plugins: {
// the RTMP plugin
rtmp: {
url: 'flowplayer.rtmp-3.2.3.swf',
// netConnectionUrl has our CloudFront domain name + 'cfx/st'
netConnectionUrl: 'rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st'
}
},
clip: {
// use the RTMP plugin
provider: 'rtmp'
}
});
Take a look at a standalone version of this demo. View its source code to get things going on your page.