FLV Embed

Latest version:
1.2.1
2009.01.13

FLV Embed is a WordPress plugin made to simplify the process of adding Flash videos (FLV) into your blog using Jeroen’s FLV Player.

For commercial use and implementation, you need to purchase a license for the player. If you want information about encoding videos into FLV and why you should use FLV, Jeroen has also written an excellent article which you can find on his site.

First of all, I do know there are already quite a few plugins that does similar things but I decided to make my own plugin for several reasons:

to enforce a standard plugin tag style (all of my other plugins use the same tag style)
no bells and whistles, this plugin embeds an FLV file and does it the easiest way
uses highly portable, extensible and future proof tags
XHTML compliant for those who cares about validation

Starting from version 1.0, FLV Embed supports Google video sitemap generation, the first WordPress plugin that does it for you! ;)

FLV Embed in action

Video sitemap

Features

uses simple, intuitive tags to generate Flash video (FLV) movies for your posts
supports video sitemap generation
standards compliant: valid XHTML
many options are configurable, such as autostart, show/hide control bar, player colour, poster image, full screen button etc.
highly interactive admin option panel for player configuration
supports text only output for RSS that prompt readers to visit the original post for Flash content
supports outputting poster image for RSS if desired
accessibility: requires Javascript to display FLV player, but will prompt user to enable Javascript when disabled
accessibility: prompt user to download latest Flash player if it is not installed or too old
accessibility: no annoying “click to activate” for IE users

Usage

This plugin uses one universal, standard tag style:

[flv:url width height]

url – the URL of the FLV file you want to embed, the path can either be site-relative or absolute
width – width of the FLV movie
height – height of the FLV movie

Jeroen’s FLV Player supports poster frame so you can turn on this feature via options if desired. The following two examples show FLV embed with and without poster frame.

Without poster frame
The poster frame feature is turned off by default.

Example input:

[flv:/video/demo.flv 480 368]

Example output:

With poster frame
In order to use this poster frame feature, you will need to turn it on via options. Once turned on, the player will look for preview image that share the same filename as the embedded FLV file. For example, if your embedded FLV file is “demo.flv”, the player will display “demo.jpg” as preview image. By default, the filetype of preview image is “jpg”, but this can be changed via options.

Example input:

[flv:/video/demo.flv 480 360]

Example output:

Version 0.3 onwards
Starting from version 0.3, it is possible to have your poster image at a different location than your FLV files. To achieve that, an optional 4th argument for the input tag and a new option $flv_posterpath were introduced. Below shows the tag syntax that should be used to provide a poster path:

[flv:movie poster width height]

movie – the URL of the FLV file, the path can either be site-relative or absolute
poster – the URL of the poster image, the path can either be site-relative or absolute
width – width of the FLV movie
height – height of the FLV movie

It is recommended that you try different settings for $flv_posterpath (found in option panel) and poster argument to have a feel how they work. There are several different ways how you could combine $flv_posterpath and optional poster path tag parameter to tell the plugin the poster location is not the same as the flv location.

If all your poster images are put within the same directory but not the same as the FLV files, change $flv_posterpath to point to your image directory, and no poster argument is required when using the embed tags. Make sure all the poster images have the same filename as the FLV files. If your poster images are scattered all over the places i.e. not within the same directory and not necessarily has the same filename as your FLV files, then use the poster argument to indicate where the poster image is.

The plugin detects the path used in the tags to determine if $flv_posterpath and $flv_flvpath should be used. In cases where absolute or site relative path are given as argument for the tags, $flv_posterpath and $flv_flvpath will have no effect on the output.

Users without Flash or Javascript
Unfortunately, about 2% of your users might not have Flash installed and about 10% of them might not have Flash 8 or above according to Adobe. For these users, the ufo.js will detect and output appropriate message that prompts these users to download and install latest Flash player onto their computers. Here’s an example screenshot that show you how this works:

Flash accessibility

While most modern browser supports Javascript, some users are too afraid that Javascript will screw up their computer so they turn it off just to be safe. This becomes a problem because this WordPress plugin relies on Javascript to display the FLV Player. To solve this problem, “noscript” tags are used to prompt these users to enable their Javascript and refresh the page for the Flash player to show up. Here’s an example screenshot:

Javascript accessibility

Text only output:
By default, this plugin will output text that reads “[See post to watch Flash video]” for your RSS feeds only. If you wished you could display the poster image in your RSS feeds by setting $flv_posterinfeed option (see below) to 1.

Demo RSS feed

Sitemap

Starting from version 1.0, FLV Embed supports video sitemap generation. In order to see the video sitemap option panel, you need to turn on the sitemap feature under your FLV Embed option panel.

The plugin will try to create a video sitemap file in your blog root but this might not be successful depending on your server configuration. If the plugin is unable to create the video sitemap file for you, then you will need to manually upload the video sitemap file to your blog root, chmod it “664″ (or “666″ depending on your server configuration) and tell the plugin where to locate your video sitemap under options.

Video sitemap settings

Custom field data are used by the plugin to generate the video sitemap. If you have been using FLV Embed in the past, you can tell the plugin to insert missing custom field data for all published post by clicking the “Update Custom Fields” button within your video sitemap option page. This will also update any existing custom fields should there be any noticeable changes.

Automatic custom field insert can be disabled on a per post basis by putting [flv:skip] at the end of your blog post. Each time video sitemap is rebuilt successfully, Google will be pinged about the sitemap updates automatically. This plugin will try not to ping Google more than once per hour (as per Google’s suggestion), but you can override this by manually pinging via the “Force Ping” button found in sitemap option panel.

Click on the demo below to have a look how the generated video sitemap will look like. You might want to “view source” to see the actual XML content.

Demo video sitemap

Options

Starting from version 1.0, you can change just about everything this plugin does using the plugin option panel. Below list some of the parameters that might be confusing for you when changing different options.

FLV Embed settings

$flv_useposter: 0 to disable poster frame, 1 to display poster frame i.e. preview image
$flv_posterinfeed: 0 to show text only output in feeds, 1 to display poster frame i.e. preview image in feeds
$flv_imagetype: Preview image extension, can be “jpg”, “png” or “gif”
$flv_posterpath: Path to poster images, trailing slash required
$flv_flvpath: Path to FLV movie files, trailing slash required
$flv_backcolor: Background color of the FLV Player *
$flv_frontcolor: Texts / buttons color of the FLV Player *
$flv_lightcolor: Rollover/ active color of the FLV Player *
$flv_screencolor: Background color of the display of the FLV Player *
$flv_logo: URL to watermark logo that will be displayed at the bottom right corner
$flv_link: URL to go to when the logo is clicked
$flv_overstretch: Defines how to stretch images/movies to make them fit the display.
- “true” will stretch them proportionally to fill the display
- “false” will stretch them to fit
- “fit” will stretch them disproportionally to fit both height and width
- “none” will show all items in their original dimensions.
$flv_largecontrols: 0 to disable, 1 to make the controlbar twice as large for visually impaired users
$flv_showdigits: 0 to hide the digits, 1 to show the digits for % loaded, elapsed and remaining time in the FLV Player
$flv_showicons: 0 to hide icons, 1 to show the play/loading icon in the middle of the display
$flv_showfsbutton: 0 to hide fullscreen button, 1 to show fullscreen button
$flv_show_stop: 0 to hide stop button, 1 to show stop button
$flv_showvolume: 0 to hide volume button, 1 to show volume button
$flv_showcontrolbar: 0 to hide control bar, 1 to show control bar
$flv_autostart: 0 to disable autostart, 1 to enable autostart (strongly discouraged as it’s annoying from a user perspective)
$flv_bufferlength: Number of seconds an FLV should be buffered ahead before the player starts it
$flv_volume: Startup volume for FLV Player

* These settings can be found in fullscreen.php as well which set the player appearance in full screen mode for older Flash users

Installation

Download and extract the “flv-embed” folder
Upload the “flv-embed” folder to your WordPress plugin directory, usually “wp-content/plugins”
Activate the plugin in your WordPress admin panel
For video sitemap feature to work properly, you should follow the instruction here

Upgrade

Deactivate the plugin in your WordPress admin panel
Remove the “flv-embed” folder in your WordPress plugin directory
Follow the installation guide above

Download

FLV Embed plugin 1.2.1 for WordPress 2.5+

If you are using older version of WordPress, please download FLV Embed 1.0 from here instead.

Support high quality yet free plugin by donating, thank you!

If you like this plugin, express your love by donating and sharing this plugin with your readers!

Support

If you have any questions, suggestions, or found any bugs in this plugin, feel free to post them in your comments. I’ll try my best to answer them but there’s no guarantee, so don’t be disappointed if you do not hear back from me promptly. :/ Always include a URL to the problem page whenever you are asking for help, it will make it easier for me to figure out your problem. Lastly, if you find this plugin useful and feel like donating some money for my effort, please use the PayPal donate button above, thank you! <3

FAQs

I keep getting “Get the latest Flash Player to see this player.” message even though I have the latest Flash player. Why?
It is very likely that wp_head() function is missing in your theme’s header. To fix this, put the following code into your WordPress theme’s header file (usually header.php, under Presentation -> Theme Editor), right before the </head>:

<?php wp_head(); ?>

Why doesn’t my flash video stretch properly?
You need a better encoder, or you can also try different settings for $flv_overstretch option.

Why are those ugly embed code showing up on my category, tags etc. page?
This is because those entries do not have their excerpt defined, and WordPress is trying to generate one for you based on the post content, and you happen to have the FLV embed tags at the top of the page! Unfortunately, I have yet to fix this problem because WordPress does not provide an easy hook for excerpt handling and I would need to literally hack WordPress to get this fixed. I will try to put this on my todo list but in the mean time, you can fix this yourself by manually adding excerpt to those posts affected.

How can I change the location of the logo?
Unfortunately you cannot, by default the logo will show at the top right corner. You might be able to manually add transparent padding to your png logo to shift the logo to where you want it to be, though it is not recommended.

How can I align the video in the middle?
Put the following code into your theme’s stylesheet (for easy way of doing this, see MyCSS):

#player1, #player2, #player3 {text-align: center;}

Is (insert feature name) supported by this plugin?
If you know that a certain feature is supported by JW FLV Player but is not supported by this plugin yet, feel free to make a request. Otherwise, it might be hard for me to provide such functionality especially those related to player’s functionality and appearance.

How can I embed a video from YouTube?
Use the YouTube URL as the file argument when using the embed tags, e.g. [flv:http://youtube.com/watch?v=fLV3MB3DpWN 480 360]

How long will it take for my videos to show up in Google’s search results once I submitted my video sitemap?
Nobody can tell for sure, but Google has definitely started putting video sitemap into action i.e. indexing the flv and including them as search results. Each new video added to the video sitemap can take as little as a day or two to show up in the search results depending on your site’s crawl rate.

I have duplicate/bad entries in my video sitemap?!
Check the post with duplicate entries and manually delete the “flv” custom fields that are either empty or corrupted.

I really like this plugin, what can I do to help?
It will be highly appreciated if you can donate whatever you think this plugin is worth, or you can also spread the love by sharing this hopefully useful plugin with your readers. boogie

History

1.2 [2009.01.13]

Fixed: Poster image issues with YouTube embed

1.2 [2008.07.18]

Upgraded FLV Player to 3.16
Added: Custom FLV player location support
Added: YouTube video support
Added: Google Analytics support
Added: Video smoothing option
Added: Show download button option
Added: Optional raw embed code for RSS
Changed: Several options in admin panel to be more user friendly
Fixed: wmode transparency issues
Fixed: Poster image issues with non FLV files (e.g. mp4)

1.1 [2008.04.22]

Upgraded FLV Player to 3.14
Added: New video sitemap appearance
Added: Auto remove invalid FLV files from custom field during custom field update
Changed: Admin option panel for WordPress 2.5+
Fixed: Only published post will be included in the video sitemap

1.0 [2007.12.30]