[ Send this article ]
Your message has been sent.
How would you like to send this article:
[ Save this article ]
Save this article to your account for easy access.
This article has been saved to your account.
Go to my account
This article has been emailed to your Kindle.
Send this article
Complete the form below to send this article, Video Blogging in Wordpress, to a friend (or to yourself). We will never share your details (or your friend's) with anyone. For more information, read our Privacy Policy.
by
Peter Spannagle Sarah Soward | April 2010 |
Content Management Open Source Web Development WordPress
In this article by Peter Spannagle and Sarah Soward, authors of the book Wordpress and Flash 10x Cookbook, we will cover the following:
- FLV Embed plugin
- Video blogging using WebTV Plugin
- Video blogging using Free WP Tube theme
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...
- In your dashboard, navigate to Plugins | Add New. Search for "FLV Embed".
- Click on Install, then on Activate.
- Visit the plugin configuration panel at Settings | FLV Embed.
- 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.
- In the Poster menu, check the box to Display poster image for embedded FLV movies.
- 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/.
- 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.
- 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.
- 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] - 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:
- 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.
- To configure your video XML sitemap, visit the Video Sitemap Options menu by clicking on Settings | Video Sitemap.
- Here, you can get or modify the feed address. Our example is
http://www.wordpressandflash.com/ videofeed.xml
- 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 xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:video="http://www.google.com/schemas/sitemap-video/1.0">
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 — and most other video formats
— 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/.
WebTV plugin (Version 0.6)
The WebTV Plugin, by Edgar de León, helps you distribute your video content. When you publish video using the WebTV plugin, the video will not only be published on your site, but it will be uploaded to a configurable list of popular distribution channels, including YouTube, Blip, and Vimeo.
The English language support page is http://www.webstratega.com/webtvwordpress-plugin-en/.
How to do it...
- In your dashboard, navigate to Plugins | Add New. Search for "WebTV."
- Click on Install, then Activate.
- Visit the plugin configuration panel at Settings | WebTV.
- Here, you will enter the username and password for each video distribution channel you want to use: YouTube, Vimeo, and Blip.tv.
- Click on Save to save your changes.
- Create a new post by clicking Posts | Add New.
- Give your post a title and put at least one word in the body. Under Publish (directly to the right of the title), click on Save Draft.
- Now, directly under the post body, look for the WebTV Status menu, shown below:
- Click on the blue button labeled Select Video.
- File Details will show you the progress of the upload.
- If you do not want to wait for the video to upload, put a check next to Automatically publish post after one successful upload?. Save your draft, and you can do something else—the post will go live once the video is ready.
There's more...
- If you have trouble uploading video, the two most likely causes are the upload limit set by php.ini or file permissions.
- If you need to increase the upload_max_filesize of your php.ini, contact your web hosting provider. If you are using a cpanel environment (such as bluehost, hostmonster, or hostgator), try the following:
- Log in to your cpanel. In the Software/Services menu, click on PHP Configuration. Under Install Default php.ini, click on INSTALL PHP.INI MASTER FILE.
- This will create a copy of the master php.ini file to your public_html directory with the name of php.ini.default. Download the file via FTP. Then, edit the file name and contents. Search for upload_max_filesize and increase the value. Save your file as php.ini, and upload it to the directory in which WP is installed.
Free WP Tube (Version 1.0)
Free WP Tube is a free video blogging theme that uses custom fields to display videos and metadata. All you need is the embed code if the video is hosted on another site. You can also use the FLV Embed plugin to display video that you host inside a Flash video player. Free WP Tube is shown below:
Download the installation package from http://www.freewptube.com/.
Getting ready
When you unzip the theme package, you will have a folder called wptube. Inside, find the folder named plugins. Free WP Tube is designed to use three plugins which are included in the zipped theme package:
- WP-PageNavi
- WP-PostViews
- WP-PostRatings
Upload these files to your wp-content/plugins folder, and activate each.
The entire wptube folder (minus the plugins folder) then need to be uploaded to wp-content/themes.
How to do it...
- Activate the theme by clicking on Appearance | Themes and choosing the WP Tube theme.
- Visit the theme configuration page. Look for a new menu at the bottom of your dashboard sidebar called Tube Options. There is only one option: Show pages for menu? Here, you decide whether or not to display pages, in addition to categories, in the top menu navigation.
- Add a new post by clicking on Posts | Add New.
- Give your post a title, and enter some text in the post body. Assign a category as usual.
- Scroll down to the custom fields menu. Three custom fields are required if you are inserting the embed code:
- thumb –The URL for the thumbnail image that will be shown on the homepage. The theme is designed to display an image size of 156x103 pixels. If you use a larger image, it will automatically be scaled to fit the predefined size. It is still worthwhile to resize (or batch resize) the thumbnail image(s) to the appropriate size, since the images will look better and the page will load faster.
- duration – The duration of the video.
- video_code – The embed code for the video.
- If you want to post your own self-hosted video, use the shortcode in the post body for the FLV Embed plugin (see the first section of this article). In this case, do not include the video_code custom field. This figure shows the three required custom fields:
- To control the number of videos displayed on the homepage, visit Settings | Reading, and enter your preferred number in the field Blog pages show at most __ posts.
Summary
In this article, we learnt how to use video plugins, including video players, embed .flv and .swf files, and video blogging.
If you have read this article you may be interested to view :
About the Author :
Peter Spannagle
Peter Spannagle is a WordPress Consultant and technology trainer, specializing in client-side coding, design using the Adobe Creative Suite, and online marketing. He is based in Oakland, California and works with clients in the San Francisco Bay Area, statewide, nationally, and internationally. In over 12 years of consulting experience he has enjoyed working with small businesses, non-profits, green businesses, artists, and independent professionals. He invites you to contact him for help with your next WordPress project.
Sarah Soward
Sarah Soward develops the curriculum for and teaches the Adobe Creative Suite and design theory at the Bay Area Video Coalition (http://www.bavc.org). She has 5 years experience as a technology trainer and is Adobe Certified. She specializes in creating web and print collateral for small businesses and non-profits. She is the Art Director for The Pagan Alliance, a non-profit organization, and a working fine artist (oil painting and drawing). In addition to teaching Flash, she is also an expert in the use of Dreamweaver, Fireworks, Photoshop, Illustrator, and InDesign.
Post new comment