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.

I’ve used Epson Artisan printers for the past six years to print attractive images on the DVDs I burn. I have terrible handwriting, and I think if you have the option you should make a good presentation. I got an Epson Stylus Photo R200 in 2004, and I upgraded to an R280 a couple years ago. I’ve purchased a few hundred Ritek RiData White Inkjet Hub Printable DVD-Rs and had great results both burning and printing on them. I always talk them up whenever I’m working at an office and I usually convince them to buy one, because nothing looks worse than Sharpie scrawl on a disc. It has always been dangerous to put a sticky label on a DVD. It can destabilize the disc, causing playback problems, and there is potential for the label to spin off and damage the player. I use clear slimline DVD cases so I don’t have to print a case insert. Most of my DVDs are temporary anyway, so I don’t worry about how they’ll work without a spine label on a shelf full of DVDs. Standard Blu-Ray cases are translucent and work great without a case insert. I think it’s important to put Blu-Ray discs in blue cases in order to avoid confusion. But of course I’ve had very little need to burn Blu-Ray discs, even though I bought a Blu-Ray burner hoping to get my clients really high-quality versions of their films. I’ve probably burned 5 discs in the past year. It definitely came in handy for screenings where you don’t want to pay a couple hundred bucks to make an HDCAM tape. The trouble is they can’t really be used for general use because you can’t count on the recipient having a Blu-Ray player.

Today I decided to purchase a multifunction printer so I could get a scanner, and maybe a fax too, for the five times a decade I need to fax something. I was pretty sure the only printers that do what I needed were the Epson Artisans, but the Staples salesman pointed me towards the Canon PIXMA MG5320, which scans and prints on discs for only $99! I thought I’d give it a shot. These things are basically disposable considering the ink refill costs, so it’s not a big deal if it turns out to be substandard. And faxing isn’t that important.

So far I’m very happy. The print quality is great, the scanner scans, and the disc printing tray seems to feed more confidently than the Epsons. The whole disc printing process was always a little dicey on the Epsons.

I don’t like to use the software that comes with the printer to print on discs because I like to be able to print straight from my design program of choice. Usually that’s Illustrator. For the Epsons I’ve always used Brian Nash’s excellent templates. I couldn’t find a similar one for the Canon PIXMA MG5320. I found an old one for some other Canon printer, but it wasn’t aligned for the current model. I revised it to line up with my printer, and I thought I’d upload it for anyone else who needs a template to print on discs with the MG5320.

Illustrator Template (PDF & AIT)

So at the moment, FCP X is pretty much a disaster. Lots of people are saying that it will get better, but for now I could never make a movie with it. That’s not being elitist or anything, it’s just a tool that I can’t use. Maybe it will get to a point where we can use FCP X, but for now I’m working under the assumption that FCP 7 is the end of the line for me.

Now, I just upgraded to FCP 7 a couple weeks before the release of FCP X, and I’m feeling pretty clever about that. But it also points out an important thing. We don’t always have to use top-of-the-line software to edit. I tend not to work under crazy deadlines, so things like 32-bit rendering and lack of multicore support are more minor annoyance than workflow killer. If I can bring videos files in, convert them to a nice codec, edit them, and then export in several different ways, including OMF, then I’m very happy.

So I’m not here to complain about FCP X. Maybe it will end up being awesome. At the moment I worry about little things like having to trick it into doing audio and video transitions separately but maybe the world is changing and I won’t be the cool kid who know how all the software works anymore. I’ll be using FCP 7 until it stops being useful to me then I’ll try something else. I want to explore the other options I’ve ignored for so long because FCP was so good.

First up is Avid. Avid has really stepped up its game in the past few years. They’ve put out a ton of releases, and most importantly for me, they’ve started limited support for 3rd party I/O hardware. Cost has always been my biggest problem with Avid. I know it works great, but I just don’t have the money for a $5,000 Mojo DX. I’m using a $200 Blackmagic Intensity Pro right now, and it does absolutely everything I need. Avid doesn’t support any Blackmagic cards, but the $450 Matrox MXO2 Mini they currently support is a fair deal. The great thing about Avid is DNxHD, which is just as wonderfully simple as ProRes, and it’s freely available, which will become important as we look at other options.

I experimented with Adobe Premiere back in college, and I couldn’t make heads or tails of it. It wasn’t quite as confusing as iMovie, but it immediately turned me off. In the meantime, Adobe has totally overhauled the program, and it is by many accounts a great program. I’ve always considered it a bit of a joke, but considering that it already comes with the Production Premium suite, a lot of places I work already own it. And it works with all the same hardware FCP does. I’m anxious to try a small project with it to see how things turn out. It seems like a poor-man’s FCP 7, but a very rich man’s FCP X. It’s written in modern code, and fully takes advantage of the power of our modern computers, but it also looks and feels like a regular editing program. What it doesn’t have is a ProRes or DNxHD. If you already have FCP on your computer, you can use ProRes, but that’s not something we can rely on indefinitely. It seems like DNxHD would be the best choice, since you’ve long been able to install Avid codecs on any computer separately from the Avid software.

The wild card I started thinking about this week is Lightworks. It has a long history, with long-time Scorsese editor Thelma Schoonmaker being the most prominent of the fancy-pants editors who use it. I talked with her assistant about it a couple years ago and he was actually using FCP to do a lot of supplemental work, because Lightworks was missing some of the fancy new HD features FCP could handle at the time. It was recently turned in to open source software, although the full source code hasn’t been released yet. The price of $0 is hard to beat. They plan to update it with a lot of the things that I would like to see in an editing software, including support for the fancy codecs I like so much. I’m going to download it and try it out soon, and I will report back on my impressions. At the moment it only runs on Windows, which is a big scary thing for some people, but I for one would welcome a return to Windows. The only reason I switched to Mac OS was for FCP, but with that out of the picture, all the major programs are available for either platform.

I think we’ve all learned a valuable lesson recently, that counting on a single company to supply all of our needs is foolish. I’ve even seen some rumblings online that Apple might abandon the Mac Pro. Without the expansion slots and huge processing power of the Mac Pro, you’re left with the future promise of Thunderbolt, which sounds pretty cool, but leaves out decades of legacy connectors only available through PCI Express slots, like Fiber, SCSI, SAS, etc. and we can’t all just go out and buy new storage solutions every couple years. What we can definitely be flexible about is software. Software is cheap, and the more of it we know, the better off we’ll be.

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.

Files encoded this way work perfectly with my Video Embed & Thumbnail Generator WordPress Plugin.

This seems like a good thing. Firewire is slow. USB is slow. USB 3 hasn’t caught on, and nobody ever adopted the higher speed Firewire protocols. We needed something really fast to replace the ExpressCard slot we lost in 2009 when 15″ MacBook Pros switched to SD Card slots. And if this could replace expensive things like fiber and SAS and open up high speed data transfers to inexpensive peripherals I am all for it. I’m not sure it can, but why not try?

But seriously. This?

That is the standard symbol for electricity, or an electrical hazard. If I saw that on a computer I would think that’s where the power cord goes, and I would be sure not to stick my finger in it. And personally I would be confused because it looks like a DisplayPort (which it is too). Here is what you get when you search for “Electricity Sign” in Google Images:

Looks like electricity. Why use the exact same graphic for Thunderbolt rather than inventing a new graphic like USB & Firewire have? It’s unnecessarily confusing.

Download from

Installation

1. Upload the entire video-embed-thumbnail-generator folder to the /wp-content/plugins/ directory.
2. Activate the plugin through the ‘Plugins’ menu in WordPress.
3. 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:

   AddType video/ogg .ogv
   AddType video/mp4 .mp4
   AddType video/mp4 .m4v
   AddType video/webm .webm

   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:

which translates to this:

Kyle Gilman Editor Reel

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.

For example

If you’re getting some use out of this plugin, please consider donating a few dollars to support its future development.

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.

Version history:

1.1 – January 8, 2012

• Includes Strobe Media Playback files so Flash Player is now hosted locally, which allows skinning.
• Added skin with new, more modern looking play button. Upgraders should check the plugin settings for more details.
• Fixed “Insert into Post” button in “Embed from URL” tab when editor is in HTML view mode. Used to do nothing! Now does something.
• Added option to override default Mobile/HTML5 encode formats for each video
• Added check for FFMPEG. Generate & Encode buttons are disabled if FFMPEG isn’t found.

1.0.6 – November 6, 2011

• Resetting to defaults on the plugin settings page resets to actual values now, instead of undefined constants.

1.0.5 – November 6, 2011

• Fixed “Embed from URL” thumbnail creation. Generated thumbnails don’t disappear anymore.

1.0.4 – November 4, 2011

• 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.

0.2 – January 18, 2011

• First Release

My soccer coach always said Expect The Unexpected. I swear to God he also once said there is no “me” in team.

In general, hard drives don’t fail during the first few years of their lives. As long as they stay under normal operating conditions they’re pretty reliable. But they’re also delicate and fragile machines spinning around at intense speeds. Stuff goes wrong. So if your masters are data based and not tape or film, you better be prepared.

Last night I came home with the first dailies from a new movie on a portable hard drive from Glyph. I’ve had great experiences with their drives. I like the little leather cases on the Portagigs and I love the standard power cables on the fullsize ones. But last night when I tried to copy the dailies to my editing drive, on ten of the files, I consistently got a -36 error, unable to read or write to the disk. I got a little worried, but I wasn’t extremely concerned because I had a backup.

Whenever I work on a movie shot on cards (which is pretty much all of them now) I always insist on transferring to at least two drives. Sometimes I do three. Drives are cheap. Re-shooting a whole day is not. This morning I went back to set and copied the files from the backup drive to the one I had brought home. It worked fine. Notice I didn’t have the backup with me. Another important step is to physically separate your backups. If you drop your bag in front of a subway train, all that backing up won’t matter.

A day I thought would never come. 23.98 & 29.97 shooting in the Canon 5D. This camera is the greatest!

Since I was running 35-foot cables, I wanted to minimize the number of cables I had to buy. Once you get over 15 feet it can get expensive especially for DVI. I managed to get it down to an incredibly thick (1/2″ diameter) DVI cable, a 33-foot active USB repeater cable, a component video cable for the HD monitor, and a red-white RCA for audio. I was already running ethernet from the DSL modem right past the closet, so I diverted it inside. I put a little 7-port USB hub on my desk, and the computer monitor has 4 USB ports as well. I put my DVD burner in an external USB enclosure on my desk so I don’t have to go into the closet to burn a disc. All firewire and eSATA devices stay in the closet. The component and DVI cables are really thick, but the whole thing just barely fit in a nice little cable zipper so it looks like a single thick cable.

I have a multi-standard DVD player hooked up to the HD monitor, so I got a component video switcher to switch between the computer’s video feed and the DVD. It’s a neat little device that has IR Learning, so I can use any remote to control it. That lives under my computer monitor stand, which does a great job of hiding cables.

The phone arrived yesterday, and due to some rather dispiriting conversations with T-Mobile customer support, I was unable to connect to the 3G network. You see, I was a VoiceStream Wireless customer from 2002. (Look it up kids, or ask your grandparents about it. They won’t remember it either.) My rate plan hasn’t existed since the days when MySpace was cool. And I obviously didn’t have a data plan. I once tried to use the web with my old phone-phone and it was unbearable. My first step was to call T-Mobile customer support before I purchased the phone in order to verify that I could switch to the lovely Even More Plus plan, which at $59.99 for 500 minutes, unlimited text and data, is a stone cold bargain. I was told in no uncertain terms that the only way the Nexus One will work is if I purchase the phone with the Even More plan, which at $79.99 and a 2-year contract is not a good deal. Even with the $250 subsidy for current T-Mobile customers, I come out behind over two years with that plan. I have the cash now. Why get stuck in a contract?

So I did my research online and it seemed pretty clear that I could use the Even More Plus plan with this phone if I paid full price. I just went ahead and ordered it, hoping for the best. That’s not something I usually do with $530 purchases, but I felt that I was in the right on this one.

The phone arrived yesterday and it is frakking beautiful. My life is already well-integrated with Google, and this takes it even further. All of my contacts are synced with my GMail contacts, and of course GMail works right out of the box. The few times I use a calendar I always use the Google Calendar, and guess what: Google Calendar is the default calendar on the phone.

I set all this up using my Wi-Fi network at home since I still didn’t have a cell data connection. I could make make calls right away, but still no 3G. So I contacted T-Mobile customer support again. And again I was told that I could only use the Nexus One with the Even More plan and that it would not connect to the network otherwise and would I like to sign a 2-year contract now? As if the phone can tell I’m paying $20/mo. more. I didn’t think I was going to get anywhere with this one, so I hung up and again I was left with a phone that makes phone calls and can get on the Internet only if someone forgets to password-protect their router.

I decided to just change the plan myself using T-Mobile’s website, but rate changes don’t go into effect until the next billing cycle, which for me is 2/14. Since I only had 14 days left to return the phone for a refund, I started to worry. Even though everyone on the Internet was telling me it would be fine, I still had to go through the wall of ignorance at T-Mobile in order to make it work. This morning I gave it another shot and was connected to my new favorite person: Shawn F, rep ID #13-20832. He confirmed that I had purchased the phone at full price without a rate plan or contract and as such I could use the phone with any damn plan I wanted. 15 minutes later I was on the 3G network.

The lesson here is that T-Mobile needs to educate their customer support. And don’t give up on your dreams, because they do come true.