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:

<object id="iPod" style="width: 640px; height: 480px; display: block; margin-left: auto; margin-right: auto;" width="640" height="480" data="http://cf.thetajoin.com/mediaplayer-viral/player-viral.swf" type="application/x-shockwave-flash">
<param name="data" value="http://cf.thetajoin.com/mediaplayer-viral/player-viral.swf" />
<param name="quality" value="autohigh" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="file=iPodVideo5GRepair.flv&amp;streamer=rtmp://streams.thetajoin.com/cfx/st" />
<param name="name" value="iPod" />
<param name="src" value="http://cf.thetajoin.com/mediaplayer-viral/player-viral.swf" />
<param name="bgcolor" value="undefined" /></object>

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!

I'm working on Part IV, stay tuned!!

-- Mark