Part III will show how to configure Drupal content with an embedded JW FLV Player 5.x media player. Get started by downloading the player and unzipping. We'll use Amazon Cloudfront to distribute the player instead of using our own webserver. After all, that's what a Content Delivery Network is for!
The media player is comprised of a few javascript files, so they need to be stored in an S3 bucket that's configured for downloading instead of streaming:
ThetaJoin uses an Amazon Cloudfront distribution based on an Amazon S3 bucket named: cf.thetajoin.com. Using the DNS masking trick, DNS was configured as a CNAME so cf.thetajoin.com pointed to the Amazon Cloudfront of http://d3hezglo7u107t.cloudfront.net. We now have one Amazon Cloudfront distribution based on an Amazon S3 bucket that contains the video files to stream and have a download distribution based on another Amazon S3 bucket that contains the media player. The delivery method for an Amazon Cloudfront distribution can only be one of streaming or download, it can't be both at the same time. That's why we have two Amazon Cloudfront distributions.
Upload the folder that contains the JW FLV Player, by default that's mediaplayer-viral, to your Amazon S3 bucket that's the source for your download Amazon Cloudfront distribution. When that's finished, change the ACL to that folder so everyone has read only access (make sure the apply to subfolders is checked):
The media player is now ready for distribution using Amazon Cloudfront. The next step is to embed the HTML required to display the player, configure it, and finally play the video from the Amazon Cloudfront distribution that's configured for streaming. There are two ways to add this content to a node, the first way is via HTML object, the second way is using a WYSIWYG editor that's able to embed the video for you.
Manual Way
The manual way to include your media player within Drupal content is to add the <object></object> tags directly as HTML, especially if you're comfortable with editing HTML. This approach doesn't require any Drupal modules to be installed and actually should work on just about any other content management system as well. The full <object></object> tags for the iPod repair video:
The values where you see the cf.thetajoin.com domain need to be replaced with your own Amazon Cloud Front distribution URL that's configured for downloading. Width/height values can be set to the size of player you'd like displayed. Look for the flashvars param, replace file=iPodVideo5GRepair.flv, with the name of your FLV file, and adjust the streamer= to point to your Amazon Cloud Front distribution that's configured for streaming. Don't forget to add the /cfx/st without the trailing slash. The second to last param "src" also needs to be changed to point to your Amazon Cloud Front distribution that's configured for downloading.
WYSIWYG Editor Method
Most popular WYSWYG editors have an toolbar button to assist with the embedding of streaming content. This example will use TinyMCE to embed the JW FLV Flash player into Drupal content so you don't have to edit HTML.
Clicking on that toolbar button presents the following screen:
Type dropdown is set to Flash, File/URL textbox contains the Amazon Cloudfront URL to the JW FLV Player. Dimensions of your player can be set as well. Click on the Advanced tab next:
Give an Id & Name to your embedded object. The key textbox in the Advanced tab is the Flashvars textbox. Take a look at the flashvars param in the manual way, copy and paste after value= into this textbox. Be sure to click the Update button to save your configuration. Once this is done, your video will be displayed within your newly embedded video player like below.
The quality of the video isn't the best after the conversion from OGV to FLV format, so it's not any problem with Amazon Cloudfront streaming this video, it's the videographer! This is a 44 minute video demonstrating how to replace the screen and headphone jack of an iPod Video 5th Generation. If you try to repair your iPod using this video, you do so at your own risk!
This is Part II of an unknown number of posts about using Amazon S3 & CloudFront to host your Drupal site's streaming media. Part I covered a very basic approach using an Ogg Vorbis Video formatted file delivered over HTTP. Although this will work over HTTP with limited support from embedded media players, this isn't the internet standard for delivering streaming videos. One standard protocol to use is the real time messaging protocol orrtmp, developed by Adobe Systems. From the Amazon CloudFront manual:
"CloudFront uses Adobe Flash Media Server 3.5 to stream on-demand content with Adobe's
Real-Time Messaging Protocol (RTMP). CloudFront accepts RTMP requests over port 1935 and
port 80."
This means flash videos can be streamed from Amazon CloudFront. This post will show how to convert that Ogg Vorbis Video file to flash video format on Ubunta 9.10 and then configure Amazon CloudFront to support streaming the flash video.
1. Converting Ogg Vorbis to Flash Video
In order to convert the ogv file to flv format, ffmpeg needs to be installed. On Ubuntu 9.10:
The -s ffmpeg option resizes the video to 800x600. The original video file was recorded at 1600x1000. This reduced the file size from 440MB to 124MB. Still 44 minutes in length though.
3. Create Amazon S3 Bucket
Amazon CloudFront needs an Amazon S3 bucket to store the flv file. CloudFront uses Amazon S3 as the source for the flv file to stream. Amazon CloudFront only supports the distribution of content, not the storage. Using your favorite Amazon S3 client, create a bucket that's named like your internet domain name. In the case of ThetaJoin, a bucket was created named streams.thetajoin.com.
4. Configure Bucket for Streaming Content
CloudFront supports content distribution using two different methods - download and streaming. The download method is used for static content such as PDFs, JPG, or PNG files. The other method is the streaming method that's used to stream either audio or video files. A CloudFront distribution can only support one of these methods at a time, hence the creation of the streams.thetajoin.com bucket to support the CloudFront distribution that will stream the flash video file. Log in to the Amazon Web Services (AWS) Manager to access CloudFront: https://console.aws.amazon.com/cloudfront/home . Once there, the streams.thetajoin.com bucket can be configured to support CloudFront streaming. Click on the Create Distribution button:
Choose Streaming for the Delivery Method, select the Amazon S3 bucket, give it a CNAME the same as the Amazon S3 bucket name, and make sure it's enabled. Creating the CloudFront streaming distribution can take some time. AWS Manager will show that the distribution was created:
The streams.thetajoin.com bucket has the following attributes:
The streams.thetajoin.com bucket is ready to support streaming of any streamable content stored there.
5. Configure DNS
The URL to the CloudFront distribution is s9vf9f1gnogon.cloudfront.net, which is on the ugly side and doesn't maintain your site domain name. It would be great for your site branding to use a portion of the origin bucket URL, streams.thetajoin.com only. To do this, you'll need to configure your DNS server with a CNAME value that's the name of your Amazon S3 bucket, that points to the Domain Name of your CloudFront distribution. In ThetaJoin's case streams.thetajoin.com points to s9vf9f1gnogon.cloudfront.net. Now, when a URL with the domain streams.thetajoin.com is requested from the media player, the DNS server will "redirect" the URL to s9vf9f1gnogon.cloudfront.net. From the end user, it'll look like your streaming content is being delivered from your own private content delivery network.
Amazon S3 and CloudFront are configured to support streaming the flash video that was converted in step 1. Part III of this series will show how to add streaming content to your site.
Give an Id & Name to your embedded object. The key textbox in the Advanced tab is the Flashvars textbox. Take a look at the flashvars param in the manual way, copy and paste after value= into this textbox. Be sure to click the Update button to save your configuration. Once this is done, your video will be displayed within your newly embedded video player like below.
This is a 44 minute video demonstrating how to replace the screen and headphone jack of an iPod Video 5th Generation. If you try to repair your iPod using this video, you do so at your own risk!
