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

ilc_flvbox options page

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:

66 thoughts on “WordPress plugin: ILC FLVBox. Show flv video using ThickBox”

  1. Hi there
    Great idea. I have been using Podpress, but I think it died, no updates for it. It breaks the gallery feature in WordPress now and also it breaks the Cooliris Plugin. There is a patch to make it work with the WordPress save revisions of the post feature. I have been looking for something to replace it. Podpress will also play mp3 audio files, work with the RSS feed(create enclosures) and keep stats of downloads. I am a 53 year old Steam Engineer that does not know code, so I cannot help. (except for testing)I tried Podcast by Blueberry but it wants you to pay to keep stats and does not come near to replacing Podpress. I think replacing Pod press would be a great goal. Keep up the great work. Sorry I can not be more help.

    Thanks

    Mark McGillveray

  2. Thanks Mark and baron.
    Mark, you’ve some amazing photographs on your site! I will be including you when I post a photographers round-up.

  3. I think I am doing something wrong…I have uploaded the file to the correct place…
    activated it no problem…
    but when I click onthe settings link I get…
    Cannot load ilc_flvbox/flvbox.php.
    any words of advice?

  4. Which version of WP are you using?
    I’m afraid that feature will only be available from 2.5 since it uses plugin_action_links introduced in that version. You can always go to the settings page by using the Settings menu.

  5. Weird, I’ve tested this in a fresh wp 2.7 install, an oldie 2.6.3 and this site, which is also 2.7, and it worked everytime. I’m going to conduct some other tests and will let you know. Good luck!

  6. Thanks Elliot…
    I have sent you a repy to your email…
    Any help I can be just let me know…
    FYI…the instal for WP is as of yesterday…
    maybe an update?

  7. Wow, beautiful website, and great information! I found you through Smashing Magazine and have bookmarked you. 🙂 Thanks for the awesome resources and info!

  8. Thanks Ann, I like the first draft of your graffiti icon set. I’ll point a link to it when it’s done.

  9. Hi Elliot,

    GREAT plugin! I had a question, though. I like the MiPlayWeb player as it is more in line with my theme. However, when I open the post with the video in it, the circle in the middle keeps spinning until I press play. Is there any way to get a preview of the video? My concern is that readers may not know the video will play by just clicking play, because they will think it is still loading.

    Any ideas? Thanks Elliot!

    Best Regards,

    -Jay

  10. Hi Jay, 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 named “piano.jpg”.

  11. Fantastic! This is what WordPress should have as the default options for embedding video.

    One request – is there any way to make the plugin allow .flv uploads through the media manager? WP won’t get around to adding them to the list of supported MIME types for some reason.

    Thanks!

  12. I’m not sure what is your issue, but flv files should be added using the Add Media button on the post writing area. However, you should check that your php.ini has the proper options to allow file upload, and if it does, how large can the file be. The php.ini variables that allow this are max_post_size and upload_max_filesize. The size is set in MB.

  13. Great plugin, I installed it and it’s working without any further config. When will you be including FlowPlayer?
    I checked the site for MiPlayWeb and they have an update for their player. It is now playing mp3 files! This could be very interesting regarding Mark’s question about PodPress.

    1. Yes, the guys from MiWebPlay notified me about the improvements they made to their player. I’m eager to implement them. However, the name FLVBox is going to be a bit wrong now, since it will be able to play MP3 files as well as FLV files.

  14. hi Elliot! one question – can i use your plugin to play videos for an other website like viemo or youtube? Since wp 2.7 i cant use videobox anymore and i found your great plugin via google 🙂 cheers!

    1. Hi hansomoto, ILC FLVBox is meant to play only self hosted videos by now but I think I can add that functionality.

  15. Hello Elliot :).

    Amazing plugin!
    Just what I was looking for :).

    One thing I can’t get is to link a graphic or a regular link to the video
    and have that graphic or link nicely displayed first.
    All I get is a tiny grey rectangle and a black square with an arrow in it (like in play video) instead of a graphic or a text link.
    What can I do to fix it, please?

    Thank you…Lu

  16. Lu, to get the preview image working, all you have to do is upload a jpg image with the same name than the video:
    cutevideo.flv
    cutevideo.jpg
    You don’t need to insert the image into the post, only the flv text link.

  17. Hi Elliot :).

    Wow – thank you for your help!

    Here is what I want to do:

    On a page, have a graphic of a video.
    When a visitor clicks it, it opens up the TickBox and plays the self-hosted video as an flv file video.
    I have the same filename jpg uploaded.
    Now, I insert the video pic (jpg) into the page.
    What do I hyperlink it to? To the self-hosted flc file URL?

    Like http://dom.com/file.flv
    I tried that – ooops.
    I still just get only the black block with white arrow, but no pic.

    Would you please give me an example?

    I think I’m the ThickBox =)))!

    Thank you…Lu

  18. Lu, here’s the procedure:
    1. on the New/Edit Post page, upload your flv using Add Video and insert the link into the post.
    2. upload a jpg with the same name, click save changes and DO NOT insert it into post.
    That’s all you need. If you have the flv in another server, you can also link to it writing a typical link, just upload an image into the post but don’t insert it.

  19. Hi Elliot :).

    I’m sorry but STILL can’t get the pick linked to ThickBox to display.
    Otherwise, all is working fine.
    Could it be ’cause I’m using a Semiologic blog?

    Lu

  20. Hi Elliot 🙂

    Got it working fine after your email note about having both files together in the same location.
    I had the flv file in a different location. So, I put the image there as well.
    It opens and it plays now!
    Smart plugin!

    Thank you…Lu

    1. Lu, I have created a special version that uses shortcodes. Download ilc-flvbox-sc, deactivate the original ilc-flvbox and install/activate this one.
      In the new/edit post area you can write:
      [video src="path/to/video.flv" img="path/to/image.jpg"]
      this special version is using the new MiPlayWeb player that can also play mp3 files, so if you put an mp3 in src it will also play it. However, this is a very raw and early version. I’m worried about backwards compatibility with the former ilc-flvbox. I think the best thing will be to pack this plugin, that plays flv and mp3, the unreleased ilc-pdfbox and ilc-thickbox to create a full media solution to display any media in a ThickBox.
      I need to make a lot of additions so don’t push it too far 😀
      Cross-domain demo is here:
      https://startfunction.com/ilctest/ilc-flvbox-using-shortcodes

  21. Hello!
    Very Interesting post! Thank you for such interesting resource!
    PS: Sorry for my bad english, I’v just started to learn this language 😉
    See you!
    Your, Raiul Baztepo

  22. hey Elliot!
    great little plug-in you have here!
    so I’ve notice a few things i thought i bring up.
    it seems to me the preview image tries to center itself by default.
    but this creates an odd offset that is very noticeable in wider layouts.
    is there any way to have the image inherit the layout from the form.
    so the poster can choose how he want to align his player?

    the second thing i have noticed is that no matter how a size the player in the options
    i always have to scroll down (modal player) to get to the controls. on firefox scroll bars
    seem to always be on and the controls don’t seem to work.
    ie works a bit better, the controls work just fine but i still have to scroll down on the div (modal player)
    in order to get to the controls.

    I’m going to try your latest version and see if using the tags helps.
    meanwhile here a test post i did try out I’m sure you’ll notice the few glitches I’m talking about.
    anyway good job so far, i can’t wait for this baby to be ready for prime time.

    cheers
    Los.

    test post…
    http://www.losart3d.com/?p=276

  23. Hey Elliot
    i apologize.
    some of the things i noticed were due to me having an ancient version of Firefox.

    I’m still seeing the alignment issues dough any ideas??

    1. I’m sure it will require certain CSS adjustments when you install it on a existing WordPress installation. Most of plugins do. I don’t see this as a disadvantage, because I could add a lot more to the stylesheet but it would get bloated, large and I don’t want to go there. The SC version currently playing on the ilctest has a horrible bug, I’ve updated it last week specially for Lu who is doing some testing. I’ve now updated the video plugin in this page (a few comments above).

  24. Hey Elliot,
    i play around with the css.
    i had some funky stuff happen before but it might have been due to my old Firefox version.
    I’ll give it a try now that I’m using a latest version.

    anyway on similar note,
    is there shortcode for setting the size of the player?
    like
    [video src="file" img="img" with=640 height=580]
    that would be super useful!
    cheers,
    Los.

  25. Humm, yes, I could implement something like that. I will what I can do when I get some time off from work (gotta pay my bills you know ;P).
    What I’m looking forward to is to make the button I installed on the TinyMCE actually work and launch a small window so you can set your options for each video.

  26. hola Eliot, a mí no me sale la opción de seleccionar ES_AR, alguna idea al respecto?

    Por cierto, muy buen sitio y ya te agregué a favoritos

    1. It’s true. I’ve disabled that option to use the default Thickbox script included with WordPress. Maybe I can email you later a previous version but first I have to find it 😛
      Thanks for the nice comments about the site!

  27. Hey Elliot,
    back with more comments 😀
    you know what i think would be really useful…
    instead of having the plug in and it’s css dictate the alignment of the movie thumbnail in the post, why not let the user pick the alignment using the formatting options already available through tiny?
    this way if you wanted to make more than one small thumb nail for the video and have all the thumb nails in the same line, you could do this by just not using any line breaks.
    if you wanted to center them you could just select the tag and hit the alignment center option.
    i think this would be more accessible to folks who don’t care much about css..

  28. Hi, congratulations for this fantastic Plug-in.
    All is ok, but I must leave checkbox from “use modal dialog” because with this option the modal dialog open the same flv video in my posts…there are some solution?
    greats!

  29. LOS, that would be great. I’m trying a new version using TinyMCE buttons.
    Andrea, I’ve sent you a fork of the plugin (same one I sent to LU) that works using shortcodes and allows you to embed more than one video on the same page.

  30. Briank, the php.ini file is located in several places through your site. It is commonly placed on the root, but you can place it wherever you need it, for instance, on the folder that will be used to store files, and you need to set the max file upload constrain.

  31. If I set the plugin to play in a thickbox the link to the video disappears. Nothing shows up. If I set the plugin to play with MiPlayWeb or OSFLV Player I get the message “You need Flash.” I have flash installed, so what am I doing wrong?

  32. It’s the first time I commented here and I must say you share us genuine, and quality information for bloggers! Good job.
    p.s. You have a very good template for your blog. Where did you find it?

  33. Something isn’t working.

    It doesn’t insert code into the page, it only inserts the name of the file (without the extension, eg. joesmovie)

    any thoughts?

  34. Hi,

    This is great plugin. Has saved me loads of time. However, I am having a small issue at the moment. When I have two or more videos on the page, it only plays the first one no matter which link I click on. Any ideas? I did change the display a bit so it now works from a plain link rather than an image. Thanks

  35. If I have multiple videos on the same page, the first video is always the one that plays, clicking any of them (someone above reported this). I have checked the source of the page, and the code is different, however when clicked on, the same video opens in all cases.

  36. just looked at if via FireFox and the first video has a hidden div that enables the thickbox goodness. The videos after that however have a javascript added to the bottom (in my case =
    1ilc_loadVideo(“/wp-content/uploads/2009/11/cathy_harrison”);

    Perhaps it’s this script that causing only the first video to play. All the code that is generated, apart from that script, points to the right assests

Leave a Reply to erik Cancel reply