AS3: FLVPlayer v1.3 Released!

Posted on February 15, 2012 by Jimmy K. in Projects.

It’s been quite a long time since I worked on this project so I figured it was about time to give it a complete programming overhaul. I stripped out a bunch of unnecessary methods; optimized the remaining methods; removed the licensing feature; and added the ability to use your own skins.

No more licensing or validation! (It’s freeeeee!)

FLVPlayer is now completely 100% free to use. With the introduction of HTML5 video players, I decided to remove the licensing and validation processes completely. FLVPlayer shouldn’t attempt to contact the mothership anymore.

Scaling is now correct and efficient.

I put my mathematician hat on and created a function to calculate a width-to-height scale ratio based on video, thumbnail, and/or stage dimensions. If the dimensions of the stage are changed, the thumbnail and video will update to fill the space horizontally and/or vertically.

The functions that automatically update stage objects no longer use the setInterval() method. Intervals have proven to be a resource hog and have been replaced with event listeners (Event.ENTER_FRAME and Event.RESIZE, for example). Intervals run every X milliseconds, whereas events listeners are only executed when a specific action occurs that you’re listening for. This change should help FLVPlayer run more efficiently.

It just *looks* better!

The previous interface was very small – And that’s something I’ve learned to steer away from in the last few years. I also really admire the black interface of YouTube’s video player interface. With those two things in mind, I decided to re-skin the player to give it a more modern look and feel. I’ve also decreased the size of the “nub” (I call it a nub, I think it’s actually called a “scrubber”) for more precise “scrubber-ing”.

Nearly every object in the player is now customizable using images or hexadecimal color values. All you need to do is upload your skin to a web server, specify the Skin URL and colors (optional) in the settings XML file, and the player will do the rest.

Why not keep it in the cloud?

There isn’t even a need to download the player and upload it to your server. You can link to the SWF in the END[SEVEN] Cloud. Heck, you can even link to the settings XML file too if you want. On the other hand, you’re more than welcome to host the files yourself too.

How to use it:

This example assumes that you have the SWFObject library included on the page you’re displaying FLVPlayer on.

<script type="text/javascript">

window.onload = function() {
swfobject.embedSWF("http://cloud.endseven.net/as3/flvplayer/1.3/flvplayer.swf", "Video-SWF", 728, 450, "9", "", { SettingsURL: "http://cloud.endseven.net/as3/flvplayer/1.3/xml/flvplayer.xml", VideoURL: "http://cloud.endseven.net/cdn/flvplayer/video/The-Avengers.flv", ThumbnailURL: "http://cloud.endseven.net/cdn/flvplayer/video/The-Avengers.jpg" }, { allowfullscreen: true }, {});
}

</script>

<div id="Video-SWF"><div style="width: 728px; height: 450px; background: #666; color: #fff; line-height: 450px; text-align: center;">Get <a href="http://get.adobe.com/flashplayer/">Adobe Flash Player</a> or watch using <a href="http://cloud.endseven.net/cdn/flvplayer/video/The-Avengers.mp4" target="_blank">QuickTime</a>.</div></div>

Feel free to use FLVPlayer in your own projects. I like giving back to the web development community and I really enjoyed the time I spent working on this project so I hope that you like it and find it useful as well.

An example of this class can be found here. You can download the latest version of this class in the END[SEVEN] Cloud.

Tags: , , , , ,

 

Jimmy K. is a Chicago-based web developer who actively posts tutorials, articles and insights on his web development blog to help other programmers and developers.

You can find Jimmy on Google+ and Twitter.

 
 
 
 
 

If you like this, please leave a comment.

Name (required)
Email Address (required)
Website
Comments: