External “Video for Everybody”
What is this?
You may also like to know about Steve Heffernan's own WordPress plugin, and it is important to note that activating both at once will lead to conflicting style sheets:
Why this plugin?
This plugin is not for everybody, even if the video tries to be. If I were not writing my own plugin, I would probably be using the Degradable HTML5 audio and video Plugin by Pavel Soukenik. My plugin uses and will follow the Video for Everybody approach. I also offer an options page where you can define site-wide default paths and dimensions. The defaults can be overridden in any particular shortcode, but if most of your video resides in the same place and has consistent dimensions, site-wide defaults keep the shortcodes simple. Soukenik's shortcodes give you more control over playback options.
Why any plugin?
I used to enter my own HTML for each video. I was using <object> and <embed> tags and I was basically cutting and pasting a block of code, then tweaking the details for particular files. As the web video landscape began to change I had no efficient way to modify my video markup. Using a plugin is not only easier, it's less prone to error, and it gives me a way to keep all of my markup consistent. In this case in particular, one can hope that the HTML the plugin produces will get simpler over time. In the words of Video-for-Everybody author Kroc Camen:
VfE is a fall-back mechanism and as such as time goes by and browsers fall out of use, it doesn’t have to fall back so far any more and we can drop fall-backs—Video for Everybody is a vanishing mediator. It exists to bridge the gap between the disparity of Flash and HTML5 and will fade away as legacy browsers are no longer needed.
Who is this for?
Ultimately it's for myself. I created the External "Video for Everybody" plugin to suit my own priorities, but I also tried to put it together in a way that would make it useful for and usable by others, and I am happy to share it. I host my video outside my WordPress site. I want to use HTML5, Ogg and WebM. So… External "Video for Everybody"
The code for this plugin is now hosted on the WordPress repository. Please visit:
You may be interested in using the External "Video for Everybody" plugin if:
- You want to offer ogg/theora or webm/vp8 video to those browsers that will play it
- You want to offer fallbacks for those browsers that will not
- You host your video files outside your WordPress site — that's the "external" bit. (You can link to files uploaded to WordPress, but you will have to make sure that the paths to the files are identical. Permalinks could complicate that process. The bottom line is that the plugin is not designed for use with files uploaded directly to WordPress.)
- You have a way to create the required .mp4, .ogv, and optional .webm and image files on your own. The recently released Miro Video Converter makes conversion to .ogv a snap.The External "Video for Everybody" plugin does not do any transcoding for you, but that also means that it has no server dependencies. For myself, I've scripted a bash process to create the files locally for subsequent upload. Provided you have the software referenced by the script on your machine, the script should run on Mac and Linux. You're welcome to use it and adapt it to your own needs. You can see the requirements and grab the code here:
(See the Theora Cookbook for more alternatives on how to encode .ogv files)
- You want to post videos easily and manage all videos in a consistent and efficient way
You will need to:
- Install and activate the plugin on WordPress 2.8 or higher
- Configure the plugin by going to Media > External VfE. (640x480 max dimensions for iPhone)
- Upload and point to a Flash player (.swf) for Flash fallbacks--the JW Player, for example
- Create from two to four files for each video: __VIDEO__.mp4, __VIDEO__.ogv, an optional __VIDEO__.webm, and an optional image file such as __VIDEO__.jpg. You can also use __VIDEO__.png files, and that is usually what I do.
(Replace __VIDEO__ with the name of your video.)
(The creation of these files is where the bash script proves handy. You can even use it to process batches.)
- Upload these files to a single web-accessible directory. You can use the same directory for all your videos, and you can set the URL in the options page.
- Add a shortcode to your page or post using the basic form:
Available attributes for the shortcode. All of these but "name" can also be set as site-wide defaults:
|name||this is the only required attribute|
|path||URL to the folder where you host your video files|
|query||An optional query to follow the file name|
|include_poster||Set to "true" to include a poster attribute in the
(This setting does not affect the poster called within the Flash object, so even if you are not including posters in your
|webm_download||Set to "true" to include a download link for a .webm file alongside the automatically generated .ogv and .mp4 links. Setting this value to true will override the results of remote file detection.|
|poster_extension||png, jpg, or gif|
|swf_file||The address to your Flash player|
|vjs||Set to "true" to invoke the VideoJS library for a given video|
|file_detector||(Will be overridden if webm_download is set to "true".) Set to "true" to test for the presence of remote video sources. If you always have all three video types, then you really don't need this option, and it's better not to use it because it can slow performance. If you do not have all three types for all of your videos, the detector will generate source tags and download links only for the files it can find. If you are using VideoJS and you sometimes have only an .mp4 and an .ogv, then you really do need to use file detection. (Your videos will not play on FireFox if VideoJS tries to play a .webm file that does not exist).|
|access_cookie||File detection will work best if your video sources are completely public. A limited kind of privileged access can be accommodated when a simple cookie will suffice to provide access. Set the access_cookie using the form "name=value".|
There are also two setting on the site-wide options page that cannot be overridden for an individual video.
- You can also disable the built in style sheet, if you wish. (One purpose of the built-in styling is to create a visual presence for posterless videos in FireFox 4.)
Demo and Tester
Here is a sample of External "Video for Everybody" in action. If you have installed the plugin on your own site, you can use the following (fully qualified) single-line shortcode to confirm that it is working. Your own shortcodes can be much briefer once you have set your site defaults under Media > External VfE.
[external-vfe name="external-vfe-tester" width="320" height="240" path="http://kevinwiliarty.com/openvideo/" query="" include_poster="true" poster_extension="png" swf_file="http://kevinwiliarty.com/openvideo/player-viral.swf" webm_download="" vjs="true" file_detector="true" access_cookie=""]
Support and License
The External "Video for Everybody" plugin is offered as is and without support under a GPL license.