New version of vfe.sh works with ffmpeg v1 and up. Overall the changes to ffmpeg increase the similarity between the ffmpeg and the libav suites, so that makes my life a little easier. I did not try for backward compatibility. If you need to use it with ffmpeg 0.6, then you need to use the 2.0 version. You can get either version from the repo on github:
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.
Just put up a new version of the vfe.sh script that includes an option to create a VP8/.webm version of your video alongside the OGG/.ogv and MPEG/.mp4. Success of the script depends on ffmpeg 0.6. As before, you also need ffmpeg2theora and qtfaststart.py.
Now I'll be able to work on including VP8/.webm in the External Video for Everybody WordPress plugin.
This upgrade involves a little adjustment to force the ffmpeg output codec to libx264. I also changed the default frame rate to 30. You can edit the script to set the default to whatever you like, and you can override the default with the -f flag.
External VfE 0.7.1 makes a minor change to fix a bug pointed out by a friendly reader. Thank you.
img tag in the embedded Flash object was mistakenly pointing to an .mp4 file. It will now point to whatever type of file you indicate with the "poster_extension" attribute, either in your shortcode or on the settings page.
On a related note. Even if you are opting to omit poster attributes for your HTML5 video tag, you will still get the benefit of using a poster image with the Flash object.
I've just updated the vfe.sh shell script to harmonize better with the latest version of the External Video for Everybody plugin.
- The poster.mp4 file will now be created only if you set a -q flag
- You can designate an output file name that differs from the input file name by providing an optional second argument
The link to the current version of the script is in the sidebar.