Introduction

Video is a major component of the Web today. Luckily, WordPress makes it easy to publish and share video. In this article, we will demonstrate ways of working with video in WordPress and in Flash. You will learn how to embed an .flv file, create an .xml video sitemap, and distribute your videos to sites such as YouTube and Blip. We will also show you how to set up Free WP Tube, a free video blogging theme that allows you to run a video web log (vlog).

FLV Embed (Version 1.2.1)

If you want to embed .flv files, use a Flash video player, and/or publish a video sitemap, this compact plugin does all three. The homepage is http://www.channel-ai.com/blog/plugins/flv-embed/.

FLV Embed uses standards compliant, valid XHTML, and JavaScript. It is based on the JW FLV Media Player, whose homepage is http://www.longtailvideo.com/players/jw-flvplayer/

FLV Embed supports Google video sitemap generation, allowing you to describe, syndicate, and distribute your video content, facilitating indexing in Google video search.

If a user is missing Flash or has disabled JavaScript, he or she is provided unobtrusive and appropriate on-screen instructions to correct the problem.

Getting ready

When a page with video loads, the player displays either the first frame of the video or a thumbnail (referred to as a poster image). The poster image is preferable, especially when a user is choosing between many videos—the first frame of a video may not offer the most representative or compelling description. Your poster image can be a poster or any image you like. Here is an example of our finished product:

You will want to think about where you will upload the video files and poster images and,how you will name them. A good place might be wp-content/uploads/video.

This plugin requires that you name your poster images the same as your video files. The default image type is jpg, but you can use any valid image file format. All your images must be in the same file format.

A batch resize and rename utility is a useful tool. For PC, one free option is the Fast Stone Image Resizer, which you can download at http://www.faststone.org/FSResizerDetail.htm.

How to do it…

1. In your dashboard, navigate to Plugins | Add New. Search for “FLV Embed”.
2. Click on Install, then on Activate.
3. Visit the plugin configuration panel at Settings | FLV Embed.
4. In the Sitemap menu, check the first box to Enable sitemap feature and automatic custom field addition. FLV Embed will now be able to create your video sitemap by automatically adding a custom field each time you use FLV Embed to insert a video.
5. In the Poster menu, check the box to Display poster image for embedded FLV movies.
6. For both of the fields, Path to poster directory and Path to FLV directory, we suggest you leave these blank, and instead use absolute URLs. If you do use relative (site-specific) URLs, keep in mind that a trailing slash is required. An example is /wp-content/uploads/videos/.
7. In the Player menu, you may want to change the colors or add your site logo as a linkable watermark to the video. Review all the Settings, and click on Save Changes.
8. To embed an FLV file, use the following shortcode in HTML view: [flv:url width height]. For example, you could insert a YouTube video at 480 by 360 (using the absolute URL) like this:

   [flv:http://youtube.com/watch?v=fLV3MB3DpWN 480 360]

   A YouTube video cannot use a poster image because the file name of a jpg cannot contain a question mark.

9. You can also insert an FLV that you have uploaded (using the relative path) like this:

   [flv:http://www.wordpressandflash.com/wp-content/uploads/video/
   swfobject_test.swf 480 360]

10. Once you have inserted the video, FLV Embed automatically populates the FLV custom field with two URLs, as you can see below. The first is the location of the video, and the second is the location of the poster image:

    

11. To use a custom poster image, upload any image to wp-content/uploads/video, and rename it to match the filename. You can also use an absolute URL if the poster image file is in another location—the filename must still match.
12. To configure your video XML sitemap, visit the Video Sitemap Options menu by clicking on Settings | Video Sitemap.
13. Here, you can get or modify the feed address. Our example is

    http://www.wordpressandflash.com/ videofeed.xml

14. You can also adjust additional optional settings, and if you have made any changes to the settings or content and need to rebuild the sitemap or update your custom fields, you can do that here too.

How it works…

The video sitemap is an extension of the XML sitemap. A video sitemap allows you to publish and syndicate online video content, including descriptive metadata to tag your content for Google Video search. Adding details, such as a title and description, makes it easier for users who are searching to find a given piece of content. Your poster image will also be included as a clickable thumbnail image. The user will be directed to your website to see the video.

If FLV Embed cannot automatically generate the XML file, you can simply copy the XML file from the demo and save it to your server. Make sure to set the file permissions to write (664 or 666) by context-clicking in your FTP client and modifying the File Attributes, as seen below:

Then, make the appropriate changes to the Video sitemap filename field in the Video Sitemap Options menu, directing the plugin to the XML file you have prepared, and rebuild the sitemap.

Here is what your finished feed will look like:

There’s more…

The videofeed.xml file has a simple structure. The first three tags specify encoding, styling, and the video sitemap protocol:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl"
href="http://www.wordpressandflash.com/wp-
content/plugins/flv-embed/
sitemap.xsl"?>
<urlset 
        >

Next, a <url> tag wraps each piece of content, which includes a <loc> tag (a link to the content on your site) and a <videogt; tag. The <videogt; tag contains additional tags that specify the video location, the video player location, the poster image location, a title, and description:

<url>
   <loc>http://www.wordpressandflash.com/flv-embed/</loc>
   <video:video>
        <video:content_loc>http://www.wordpressandflash.com/wp-
content/uploads/video/swfobject_test.swf</video:content_loc>
        <video:player_loc allow_embed="No">http://www.
wordpressandflash.com/wp-content/plugins/flv-embed/flvplayer.
swf?file=/wp-content/uploads/video/swfobject_test.swf</video:player_
loc>
        <video:thumbnail_loc>http://www.wordpressandflash.com/wp-
content/uploads/videos/swfobject_test.jpg</video:thumbna il_loc>
        <video:title><![CDATA[FLV Embed]]></video:title>
        <video:description><![CDATA[FLV Embed is a great plugin that
allows you to display FLV files &#8212; and most other video formats
&#8212; in a compact Flash video player. Visit the homepage at:
http://www.channel-ai.com/blog/plugins/flv-embed/. Check out the
video sitemap!
Get the latest Flash Player to see this player.
[Javascript required to view Flash movie, please turn it [...]]]></
video:description>
        </video:video>
</url>
</urlset>

With this info, you can manually create a .xml video feed for any site, without a plugin.

Commercial use?

Commercial use does require a license. A free alternative for commercial use is the Hana FLV Player, whose homepage is http://www.neox.net/w/2008/05/25/hana-flv-playerwordpress-plugin/.