WordPress.org

Author: kylegilman

A plugin to make embedding videos, generating thumbnails, and encoding HTML5-compliant files a little bit easier.

The plugin adds several fields to any video uploaded to the WordPress Media Library. Just choose a few options and click Insert into Post to and you'll get a shortcode in your post that will embed a flexible Flash & HTML5 video player with a preview image into your post.

The embedded player will default to a Flash video player if you're using a Flash-compatible file (flv, f4v, mp4, mov, or m4v). Otherwise it will use an HTML5 video element. I highly recommend H.264 video and AAC audio in an MP4 container. If you're encoding with Apple's Compressor, the "Streaming" setting should be "Fast Start" (NOT Fast Start - Compressed Header). I've written up my recommended video encode settings in a post on my website.

The plugin uses FFMPEG to generate thumbnails and encode HTML5/mobile videos. By default the plugin looks for FFMPEG in /usr/local/bin but if FFMPEG is installed in a different place on your server, you can point it to the correct place in the plugin settings. Users running WordPress on Windows servers should try using Linux-style paths (with forward slashes instead of backslashes and a forward slash instead of C:)

If FFMPEG is installed on your server, you can generate thumbnails using either the "Generate" or "Randomize" buttons. The "Generate" button will always generate thumbnails from the same frames of your video, evenly spaced. If you don't like them you can randomize the results with the "Randomize" button. If you want to see the first frame of the video, check the "Force 1st Frame Thumbnail" button. If you want really fine control you can enter timecode in the "Thumbnail Timecode" field. Use mm:ss format. If you want even more control you can use decimals to approximate frames. For example, 23.5 will generate a thumbnail halfway between the 23rd and 24th seconds in the video. 02:23.25 would be one quarter of the way between the 143rd and 144th seconds. You can generate as many or as few as you need (up to 9 at a time). The unused thumbnails will be deleted once you click "Insert into Post" or "Save Changes."

In the plugin settings you can set the default maximum width based on the width of your particular template and those values will be filled in when you open the window. If you generate thumbnails, the video display dimensions will be automatically adjusted to match the size and aspect ratio of the video file. You can make further adjustments if you want.

The "Encode" button is still a bit experimental. If you have FFMPEG on your server, clicking the button will start encoding an iPod/iPad/Android compliant H.264 video (which will also work in Safari and IE 9), or a Firefox/Chrome-compatible WEBM or OGV video in the same directory as your original file. Anyone using a modern browser who doesn't have a Flash plugin will see these files instead of the original. The files will encode in the background and will take several minutes to complete, depending on your server setup and the length and size of your video. New in version 2.0, you will see the encoding progress, you will have the option to cancel an encoding job, and you should get an error message if something goes wrong. Closing the window will not cancel encoding, but once the window is closed the progress bar won't come back. Users on Windows servers will not get any feedback while the files are encoding.

Also new in this version is the option to encode an HD Mobile/H.264 file. Since there are more devices that can handle HD H.264 videos available now, you can choose to increase the resolution to 720p or 1080p. Keep in mind, very few mobile devices can currently play 1080p video.

The plugin is currently favoring Flash instead of HTML5 because Flash is a better user experience in most cases. I'm particularly not a fan of some browsers' tendencies to auto-download HTML5 video elements. I may eventually include the option to favor HTML5. However, if you embed a non-Flash compatible file (like an ogv or webm file) then you will only get the HTML5 video element. If you want to make ogv, webm, or H.264 files available and can't use the FFMPEG encode button, you can upload your own files to the same directory as the original and the plugin will automatically find them. For example, if your main file is awesomevid.mp4, the plugin will look for awesomevid.webm and awesomevid.ogv as well. If you want to embed a high-res H.264 video but also make a mobile-compatible version available, add -ipod.m4v to the end of the filename (awesomevid-ipod.m4v) and it will be served up to most smartphones and tablets instead of the original.

Android viewers who don't use Flash will see a play button superimposed on the thumbnail to make it a little clearer that it's an embedded video.

If you have Mobile, WEBM, or OGV files encoded, you will have the option to embed one of those files instead of the original. This is for a small group of users who need to upload a file format that can't be embedded and want to replace that file with a newly encoded file. No matter which option you choose, any other encoded files will still be automatically swapped in on the appropriate devices and browsers.

If you want to make it easier for people to save the video to their computers, you can choose to include a link by checking the "Generate Download Link Below Video" button.

Sometimes for various reasons you might need to embed video files that are not saved in the WordPress Media Library. Maybe your file is too large to upload through the media upload form, or maybe it's hosted on another server. Either way, you can use the tab "Embed from URL" in the Add Media window. Just enter the Video URL manually, and all other steps are the same as the Media Library options. If the video is in a directory that isn't writable, any encodes you make will go to an "html5encodes" subdirectory in the WordPress uploads directory.

Once you've filled in all your options, click "Insert into Post" and you'll get a shortcode in the visual editor like this

[FMP poster="http://www.kylegilman.net/wp-content/uploads/2011/10/Reel-11-10-10-web_thumb2.jpg" 
width="720" height="404"]http://www.kylegilman.net/wp-content/uploads/2011/10/Reel-11-10-10-web.mp4[/FMP]

After you save the post, the thumbnail file will be registered in the WordPress Media Library and added to the post's attachments. Thumbnails are saved in the current WordPress uploads directory. Encoded videos are not yet registered with the media library.

If you want to further modify the way the Flash video player works, you can add the following options inside the [FMP] tag. These will override anything you’ve set in the plugin settings.

• poster="http://www.example.com/image.jpg" sets the thumbnail
• width="xxx"
• height="xxx"
• controlbar="docked/floating/none" sets the controlbar position. HTML5 videos only respond to the "none" option.
• loop="true/false"
• autoplay="true/false"

These options will only affect Flash video elements. They will have no effect on HTML5 videos.

• autohide="true/false" specify whether to autohide the control bar after a few seconds.
• playbutton="true/false" turns the big play button overlay in the middle of the video on or off.
• streamtype="live/recorded/DVR" I honestly don’t know what this is for.
• scalemode="letterbox/none/stretch/zoom" If the video display size isn’t the same as the video file, this determines how the video will be scaled.
• backgroundcolor="#rrggbb" set the background color to whatever hex code you want.
• configuration="http://www.example.com/config.xml" Lets you specify all these flashvars in an XML file.
• skin="http://www.example.com/skin.xml" Completely change the look of the video player. Instructions here.

I'm not really a software developer. I'm just a film editor with some time on his hands who wanted to post video for clients and wasn't happy with the current state of any available software. But I want to really make this thing work, so please help me out by posting your feedback in the comments.