In January I made a plugin for WordPress that generates thumbnails for videos posted online, and the proper HTML & JavaScript codes to embed those videos in a webpage. It has come in handy many times when I want to show a work-in-progress to a client, post dailies, or just embed a video on my blog. Writing it really helped me get a handle on the whole HTML5 video thing, which in summary is a big ugly mess.
The first version was really crude because I couldn’t figure out how to hook in to the WordPress Media Library, but it worked well enough for my purposes. I always wanted to go back in and make it more user-friendly, so for the past few weeks I’ve been revising the plugin to tap in to the built-in uploading and media management systems. Big thanks to Andy Blackwell for posting his great tutorial on the very important attachment_fields_to_edit hook. I learned a lot more about the WordPress plugin system, and finally put the plugin in their directory, which forced me to learn a few things about SVN, which is a clever if initially baffling system.
Anyway, I highly recommend the new version of this plugin if you’re doing any video embedding on your WordPress site. You don’t need FFMPEG if you just want a good system for posting videos you have hosted on your site, but if you do have FFMPEG on your server, you’ll get thumbnail generating and automatic HTML5/iPhone-compatible file encoding. It’s pretty neat.
Unless there’s a specific need for something else, I almost exclusively encode web video using H.264 in an MP4 container. It looks great, and is the most widely compatible format I know. I started doing it mostly because Flash Video players support it without having to re-encode as FLV. Here are the settings I use in Compressor:
Do this on a full-quality “Current Settings” QuickTime movie already exported from Final Cut Pro. Don’t export directly to Compressor from FCP. This is a lot cleaner.
Start with the H.264 preset in the Apple/Formats/QuickTime folder. It might seem wrong, but we’re not going to use the MPEG-4 “File Format” setting. We’ll be working in QuickTime Movie format since we get the most control over compression settings that way.
Change the Extension setting to mp4. Yes, it’s really that easy. You have to change it here though. You can’t just change your .mov filename to .mp4 after it’s encoded.
Next, click on the Video “Settings…” button and use these settings:
You might need to change these based on your needs. I find the sweet spot for quality and file size lives between that Medium and High setting. Some streaming may require you to restrict the data rate. Multi-pass encoding hardly adds any time to the process (the 2nd pass is very quick) so I always leave it on.
Click OK, and move on to the Audio “Settings…” button. Switch the Format over to AAC and you should be fine.
If you have to be stingy with your bits, you can fiddle by going down to Mono or reducing the Target Bit Rate. I’m generally of the opinion that we shouldn’t be too stingy with our bits, so I don’t do that.
Hit OK and move on to Streaming. Change it to “Fast Start”
This lets your video start playing before the file finishes downloading. It’s not streaming, but progressive download; like YouTube. Don’t choose Fast Start – Compressed Header because that will prevent Flash players from taking advantage of the progressive download and won’t really help your file size much.
Frame Controls. Use them if you have the time. It really makes a difference in quality but definitely increases encode time. I usually just switch it on and leave it at the default settings unless I need to deinterlace or change the framerate. In this case I’m only really using the Better Resize Filter.
Finally, do whatever you need to in the Geometry tab to output the resolution you need. Keep the height an even number. Odd numbers freak out the H.264 codec. In this case 720×405 is closer to 16:9, but change it to 404 and everyone will be happier.
Save your custom preset and then submit. Make sure you set up a QuickCluster if you have more than two cores and you’ll get a real speed boost.
Upload the entire video-embed-thumbnail-generator folder to the /wp-content/plugins/ directory.
Activate the plugin through the ‘Plugins’ menu in WordPress.
Make sure you have all your MIME types configured correctly. Many servers don’t have .mp4, .m4v, .ogv configured, and even more don’t have .webm. There are a number of ways to do this. In your public_html directory you can edit your .htaccess file and add the following lines:
Or use your web host’s configuration panel (cpanel, etc) to add a custom MIME type.
Just click the Insert Media button to get started:
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 another post.
I will no longer provide tech support for Flash video playback if you use a video that is not H.264 video and AAC audio. I’ve seen several people try to use MPEG-4 video in an mp4 container. This will not work. You must use H.264 video in an mp4 container. There are a few other formats that might work, but if you’re trying to use something else, you are on your own. If you ask me in the comments why your video doesn’t work, please post the video and audio codecs. MP4 or MOV is not a codec. To determine a file’s codecs on a Mac, select the file in and hit ⌘+i. Under “More Info” you will see “Codecs” listed. In Windows, use GSpot.
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.
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. 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. Currently, if something goes wrong after the encode starts, the plugin will not tell you. It also won’t tell you when the files are done. You just have to wait.
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 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 new 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 Flash Media Player” and you’ll get a shortcode in the visual editor that looks like this:
Once 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. HTML5 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.
If you’re getting some use out of this plugin, please consider donating a few dollars to support its future development.
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.
FAQ:
Why doesn’t my video play?
Most of the time your video doesn’t play because it’s not encoded in the right format. Videos have containers like mp4, mov, ogv, mkv, flv, etc and within those containers there are video and audio codecs like H.264, MPEG-4, VP8, etc. The best option for this plugin is an mp4 container with H.264 video and AAC audio. mp4s with MPEG-4 video will not play in the Flash player, and if you don’t use AAC audio you won’t get any audio.
Why doesn’t this work with YouTube?
WordPress already has a built-in system for embedding videos from YouTube, Vimeo, Dailymotion, etc. Just put the URL into your post and WordPress will automatically convert it to an embedded video using oEmbed. You don’t need this plugin to do that. If you’re trying to generate new thumbnails from YouTube videos, I’m not going to risk Google’s wrath by providing that functionality. I’m not even sure I could figure out how to do it anyway.
I’m on shared hosting and can’t install software. Does this work without FFMPEG?
Some of it will work without FFMPEG. You can generate embed codes for your videos on any host because that part of the plugin is JavaScript running in your browser. But without FFMPEG you won’t be able to generate thumbnails or generate HTML5 videos. There is no way around this. A program has to read the video files in order to generate the thumbnails, and FFMPEG is the best one I’ve found to do that.
More thorough check made for existing attachments before registering poster images with the WordPress Media Library. Avoids registering duplicates or medium/small/thumb image sizes if they’re used as poster image.
Added loop, autoplay, and controls options to HTML5 video elements.
When saving attachments, won’t try to delete thumb_tmp directory if it doesn’t exist.
1.0.3 – October 27, 2011
Revised thumbnail cleanup to make sure temp files aren’t deleted when generating thumbnails for more than one video at a time.
1.0.2 – October 21, 2011
Fixed a shocking number of unenclosed stings in get_options() calls. Bad programming. Didn’t affect functionality, but will stop generating errors.
Removed clumsy check for FFMPEG running. Was preventing encoding if ANY user on the server was running FFMPEG. Be wary of overusing your system resources though.
1.0.1 – October 21, 2011
Quick fix to add mdetect.php to the plugin package from WordPress
1.0 – October 20, 2011
Huge re-write.
Integrated with WordPress Media Library and added WEBM support.
Increased control over thumbnail generation.
Added tab to Insert Video dialog box for adding by URL (like the old version).
0.2.1 – October 9, 2011
Check made to ensure iPhone/iPod/Android compatible encode video height is an even number when HTML5 video encodes are made.
I’ve seen a couple videos making the rounds among the film nerd websites this week that seem to be made by what I can only describe as disgruntled old farts. First was the “Cinematographer vs. Producer” video in which a comically clueless producer has the ABSOLUTELY INSANE plan to shoot a feature film on a Canon 7D.
Frankly, this is a perfectly reasonable thing to do. What’s so special about “Feature Films” anyway? People used to shoot feature films on DV cameras for God’s sake! And depending on the look you’re going for, you might not need a lot of lights. I’m in pre-production on a feature right now that will be shot on a 7D and I have absolutely no qualms about it. This imaginary producer is an idiot, but clearly this is the wrong DP for the job. Maybe they should give Shane Hurlbut a call.
The one that really drove me nuts was a little closer to home. “So, you’re an editor…”
It’s another straw man talking with a professional editor who apparently can’t figure out how to use Final Cut Pro. I’ve certainly never had the problems he describes. This one is upsetting on a couple levels. First, why should anyone expect the average person to understand what an editor does? It’s a specialized and confusing job. I don’t know what middle managers do all day either. And as a lifelong freelancer, I still fundamentally don’t understand how vacation/sick/personal days work. Mocking people who don’t know about editing and don’t need to know about editing is just petty.
Second, of course is the attitude about Final Cut Pro. Like the 7D video, it takes a fear-based approach to things that are outside the comfort zone of the author. Rather than take the time to learn how to use the extremely flexible and powerful Final Cut Pro software, the author calls it a piece of prosumer crap and repeats a bunch of scary myths about how it works. With the 7D the author is on better ground, since all of the things he says about the 7D are true, but they are less of a problem than he makes them out to be.
My point is, I for one welcome our new insect overlords. I’m perfectly happy to round you people up to toil in the 7D’s underground sugar caves.
I edited the movie, but I would like to emphasize that I did not edit this trailer. This is the so-called “red band” trailer, so put on your headphones if you’re at work.
I edited this promo for The Marriage Ref a couple weeks ago. It was shot entirely on the Canon 5D Mark II. It was a really fun experience, and Mr. Seinfeld came in a couple times to work with us. It’s great to see something I edited released so quickly but the quality of the encoded video is pretty low. It’s my understanding that this full version of the story will not be shown on TV.
It’s been over a year in the making, but Episode Two of my planned decade-spanning animated time travel web series “Time Travellin’” is finally finished. Take a look at “A Common Misconception”
I learned a lot about animation by doing this, and I’m hoping the next one comes a little quicker. But if I keep getting all this paid work, it’s going to take forever.
I’ve been working off-and-on with Hal Hartley since 2001 when he was my college thesis advisor. I’ve spent time as his teaching assistant, production manager, editor, and now we’ve built a new website for his company Possible Films. There have been several incarnations of the site over the years. In 2004–05 I packed envelopes with DVDs and CDs ordered through PayPal. For the past few years the site has been a very simple affair, with no direct sales. But now we’re doing something that represents a very interesting future for film distribution. We’re selling downloads of movies and soundtrack music straight from the website. We’re also premiering original content (again, video and audio) for free streaming. The really exciting goal is to premiere a feature film as a downloadable movie. There’s no DRM on anything, so our customers can watch the movies they buy in any way they want. I put a lot of work into this project over the past few months, and I’m really proud of both the look and the functionality of the site. Please, take a look at it, and if you like what you see, think about buying something.
