WordPress plugin: ILC FLVBox. Show flv video using ThickBox

This new plugin was created not only from a necesity but as a medium of learning as well. I wanted to play video using ThickBox, and just the other day someone asked on the WordPress support forums about playing FLV using Lightbox. I already had something done so it was a fine oportunity to finish it. So here it is.

playing piano

It’s not much right? However, I couldn’t find any wp plugin to play flv using a modal dialogue. If you know of anyone please let me know.

Why another plugin? good question. As I said, there was this answer on the forums and I found no wp plugin to play video using ThickBox. Now I know there at least one. No big deal again. On the other hand, the web has become increasingly overloaded with stuff that is very alike. A lot of that stuff in unappropriate in some way for using it widely. This makes difficult to find what you need. When I started this I found that almost every WP plugin to play self-hosted video relied on JW Media Player, which is definitely awesome but it’s not free for commercial use. Ok, the license is priceless, but if you didn’t had one buck to spend? you get the point.

Free FLV players

That was the situation. But. There are these great players that can be used for free.

http://www.miplayweb.com/player/

Another excellent player, this one is included on the plugin. Rock solid, image preview, fullscreen, nice interface. I have contacted the guys coding it and they were charmed by the idea of this WP plugin and said that they would be adding more features when they get some time off. First thing could be a playlist :D. Doesn’t state a license, but claims that you can use it for free.

http://www.osflv.com/

A very well known player, featuring easy skin color change, external initial volume setup, autoload and autoplay features. I still miss an image preview. It is also included on the plugin. Licensed under GNU or GPL license.

http://flowplayer.org/

An amazing FLV player. I haven’t included it in this release since I want to dig a bit more on its features and create a separate options page for it. Just take a look at the Flowplayer JavaScript API and you will see why it is that better. Is the only one that has a logo on the fullscreen mode but it’s completely unobtrusive. Licensed under GPL license, but you must leave the logo intact (which is fine to me, as an exchange for using this awesome player).

http://flv-player.net/

To me, the best of all free flv players (humm without a logo, because Flowplayer is great). However, I couldn’t include it. I’m using swfobject to embed the players but somehow this one has some weird issue in IE6+7. Some says that it is due to the fact that IE6+7 have a flag to calculate dimensions. When you first load the page the flag is on, but when you reload the flag is off, so dimensions are not calculated and, in this weird case, the swf file is set to a minimum size. I have tried every way to get it working but either I had this issue using SWFObject, or I had the IE6 click to activate issue, which is quite annoying after a few times. This guy is gorgeous, playlists, tiny interface, js events, you can’t get better than this. Licensed under CC BY SA, but he states that you can use it withouth citing the author.

Options and usage

Cute, isn’t it? I have added some jQuery to collapse related areas, such as the OSFLV options. There’s a CSS file that will allow you to customize how (when ThickBox is enabled) the inline image looks. If you want to use it in a spanish site, you can check the Use ThickBox es_AR which is nothing but a ThickBox with the Close labels changed to Cerrar. I’ve also added animations to the ThickBox such as slideDown, fadeIn, fadeOut, etc. This is a generic TB I use, and if you use it for displaying images on your site, you will get the fade transitions I also added to it.

If you uncheck the ThickBox option, you will get an inline video that will be paused at start and not loaded. If you check ThickBox and you use OSFLV, when you click the image that lauches the ThickBox, the video within will start right away due to OSFLV autoplay feature (yes, if you close it the video will stop).

If you need to move the plugin to another folder you can do it and set the actual path here.

The ilc_flvbox WordPress plugin is hosted on WordPress.org and will be available for download from there to  start ThickBoxing your videos. Using the plugin is very easy, just upload a video using the Add Video item on the edit post/page area, insert the link on the post and you’re ready to go. The plugin will look for flv extensions within href in links and will get all things ready. The filter used is ‘the_content’ which is one of the closer to the rendered page. If you wish to include a preview of the video upload a jpg image with the same name than the video. For example, if your video is “piano.flv” the jpg would be “piano.jpg”.

Suggestions

I made the plugin with an ThickBox on/off state. Should I update it to set ThickBox whenever someone wants to? I’m planning to use shortcodes, or add some buttons to the TinyMCE Editor to do this. I will add also a stylesheet to be loaded when ThickBox is not on, so you can set the style in the plugin options page.  Right now there is a wrapper around the inline content so you can still style it on your main stylesheet. I’m open to all of your suggestions, let’s make a great plugin for everyone to use!

UPDATE

This a test version that uses shortcodes to embed a video from one site and an image from another.  Download ilc-flvbox-sc.

Usage: