I came across a question the other day from a client. On another site, I host several videos that average 1 hour in length. The problem was that they were downloading progressively instead of streaming. Meaning, if you were to close the browser window in the middle of the video, when you came back it would have to start playing from the beginning again.
Most of the big video hosting sites, i.e. YouTube, Vimeo etc. have streaming video that allows you to put the playhead anywhere on the timeline and start the video from that position. Upon further research I found that the cloud storage company I was using (Rackspace) will work with FlowPlayer. I already have a licensed copy of JW Player, so I did some more searching. Turns out that Amazon S3 is compatible with this player… This is just where the fun began.
From the research I have performed, there are two media types that work well for streaming. You can use .mp4 or .flv files. If you use .mp4 it must be in the flash codec for it to stream properly. (If I’m wrong about this please let me know.)
Next come the tricky parts.
I decided to open an Amazon Cloud Front account so I could wrap my videos in the JW player. The first thing you need to do after opening your account is to create a bucket. Within the bucket you can add folders and files. You can place your video player files and the media files you are going to use within this bucket. **Make sure you change the permissions on the files to “PUBLIC”, or your player won’t work! You can do this by right clicking on them and selecting “Make Public”
Next you need to create your streaming distribution. To do this, go to the CloudFront tab of the console and make a streaming distribution with files we created above. SELECT STREAMING. The origin will be the name of the bucket you created. Then click on create. Don’t worry about the other fields.
The code for your video player is going to be different depending on the type of video file you are calling.
For MP4 it will look like this:
<div id=”container”>Loading the player …</div>
<script type=”text/javascript”>
jwplayer(“container”).setup({
flashplayer: “/path_to_player/player.swf”,
file: “Mp4:FILENAME“,
height: 360,
provider: “rtmp”,
streamer: “rtmp://YOUR_CLOUDFRONT_DOMAIN/cfx/st”,
width: 640,
skin: “path_to_skin/skin.zip”
});
// ]]></script>
Pay close attention to the file: “Mp4:FILENAME”, line. DO NOT ADD THE .mp4 after the filename when you are using a mp4 file!!!! Otherwise the player will appear as though it is loading FOREVER!!! Make sure it is file: “Mp4:Filename”
I learned this lesson either the hard way, or missed the memo somewhere.
For flv it will look like this:
<div id=”container”>Loading the player …</div>
<script type=”text/javascript”>
jwplayer(“container”).setup({
flashplayer: “/path_to_player/player.swf”,
file: “FILENAME.flv“,
height: 360,
provider: “rtmp”,
streamer: “rtmp://YOUR_CLOUDFRONT_DOMAIN/cfx/st”,
width: 640,
skin: “path_to_skin/skin.zip”
});
// ]]></script>
Notice that they are identical EXCEPT for how the file is called.
Here are some other things that you need to know:
Make sure you have /cfx/st on the end of your cloud front rtmp address! Otherwise, it won’t work.
Make sure you have any skins you are calling in a .zip folder
There are instances that you would want the skin folder to not be zipped, you can find articles on Longtailvideo.com for more advanced customization.
More Information:
