I've just released version 2.0 of External "Video for Everybody." New to this version is the option to use remote file detection so that the plugin will generate source tags and download links only for video sources whose existence it can verify. You should use this option only if some of your videos do not have all three source types (.mp4, .webm, and .ogv). If that is the case, though, and if you are using the VideoJS library, then you ought to use file detection. The External "Video for Everybody" plugin is now bundled with Video JS 3, and a missing .webm video will cause VideoJS to fail on FireFox.
Version 1.0 of the "External Video for Everybody" WordPress plugin addresses two issues relating to poster images for HTML5 videos:
- First-time activations will now use poster images by default. This is a reversal of the previous initial setting. Existing activations will retain their current settings, but existing users who are not using posters might want to start. (See rationale below.)
- The plugin now includes a simple and optional built-in style sheet to help posterless videos establish a visual presence in FireFox 4.
The HTML5 <video> tag can take a poster attribute, but setting a poster previously (in iOS3) caused the video to fail on iPhones and iPads, so the default for the External Video for Everybody plugin had been not to set a poster. The iPhone/iPad problem has been corrected in iOS4 so that viewers with an up-to-date iOS should not have difficulty with posters. But there is an even more compelling reason to start using poster images: Unlike FireFox 3, FireFox 4 does not automatically display the first frame of a video. Unless you preload or set a poster, viewers may well see nothing but a blank space (with controls at the bottom) where the video should be. The video will play when you click to start it, but the white space can make for an awkward layout.
If you've been uploading poster files all along in anticipation of the day when they would work across devices, you might want to throw the switch on the Media > External VfE options page. Of course, you can still override site-wide settings in your individual shortcodes.
In case you haven't been using posters and don't plan to start, the plugin's optional built-in style sheet will somewhat alleviate the blank spaces in FireFox 4 by adding a drop shadow and a background gradient. A posterless video in FireFox 4 will then look like this:
This is a pretty minor release, the main point of which is to bring the VideoJS library up to the current stable version (2.0.2). The new library creates a more portable HTML structure and offers some nice updated styling.
Browsers still seem to respect preloading and autobuffering attributes unevenly, so bandwidth continues to be a concern for those with multiple videos per page or with large videos on popular pages. My own version of FireFox (3.6.13) happens to preload against the settings when I use the VideoJS library, but does not preload when I use the native controls. Chrome seems to preload no matter what I try, but Safari now seems not to preload if you don't want it to.
The hosting page on WordPress.org is:
VideoJS provides a nicely styled set of playback controls, including a "full screen" button, a feature that I heartily welcome. VideoJS includes a range of skins, but only the default is available for this release of my plugin. You may want to know that Heffernan, the author of VideoJS, offers his own WordPress plugin:
The version of VideoJS in my plugin includes some customizations that should facilitate integration with a wide range of themes. At least as of version 1.1.2, VideoJS builds the video controls using ul and li tags. Not a few WordPress themes include unqualified styling for these elements which can then interfere — sometimes severely — with the layout for the controls. I have converted the ul and li tags to div tags and made the accompanying adjustments to the library's style sheet. The change seems to help considerably.
I am also exercising an option the VideoJS code provides to disable the hiding of the "downloads" section when the client's browser has playback capability. There's a double negative there. What it works out to is that I am opting to have the download links display even when playback is working.
Finally, I tweaked the function that hides the controls after four seconds so that the controls instead remain visible as long as the mouse is within the video area.
I've just released version 0.8 of the External "Video for Everybody" WordPress plugin. The plugin now supports delivery of .webm video files. The change to the HTML is minor, and it's been part of Kroc Camen's Video for Everybody for a while now. I'm just catching up, not least of all because I wanted to be able to do testing of my own before putting it out there.
A trickier question was how to handle the links for downloading files. I've decided to continue generating the .ogv and .mp4 links automatically. These two files are still required in order to play your video on as many systems as possible. The .webm file is icing for now, so you can set a shortcode attribute to include the .webm link whenever that file is also available.
To put it another way, if you are using this plugin, you should offer an .ogv and an .mp4, and you can offer a .webm if you like. If .webm is not your thing, you can just keep using the plugin as before.
A fair question to ask might be: Why use .webm at all when it doesn't increase the viewability of your video, when it takes longer to transcode (at least in my experience), when the file sizes are larger (again, in my experience), and when it means uploading and storing three sizable media files instead of two? The simple answer would be that the quality of the video seems higher to me.
Which raises another point: The order of the source elements is dictated by quirks of certain devices on which you might view the video. That's too bad. Even though .webm looks the best, .mp4 needs to be listed first and might therefore be preferred even by clients that could handle the .webm. It would be nice to find a way to privilege .webm wherever it's supported, but that's a matter for a future version.
Version 0.6 of the External Video for Everybody WordPress plugin allows you to designate (on the options page or within a shortcode) whether or not you wish to include a poster attribute in your HTML5 video tag. Dropping the poster follows Video for Everybody 0.4 in order enable playback on iPads. Leaving posters as an option allows each user to decide globally or on a video by video basis. You might even turn posters off but continue to create and upload them with the idea that you can turn them on when iPads can handle them. Or you can just start making your posters into the first frame of the movie.
Additionally, version 0.6 offers experimental support for video URL's that require a query string after the file name. Amazon S3 has been pointed out as a case in point, but I do not use the service, and so I cannot test whether my accommodation actually addresses the problem.