External “Video for Everybody”

What is this?

External "Video for Everybody" is a WordPress plugin that you can use to show videos on your WordPress site. You enter a simple shortcode on your page, and the plugin generates the HTML to deliver the media. Browsers that understand the HTML5 tag will display MPEG/H.264 (.mp4), Webm/VP8 (.webm) files or Ogg/Theora (.ogv) files. Other browsers can use Flash to play the .mp4 file. In all cases, the markup includes links to download the media files. The HTML used here diverges only slightly from Kroc Camen's Video for Everybody model. See that site for fuller details. As of v0.9 the plugin also enables the optional use of Steve Heffernan's VideoJS JavaScript library. VideoJS provides nice video controls including a full screen option. You can read more about this addition in the release notice at:

http://open.pages.kevinwiliarty.com/2010/10/11/external-vfe-0-9/

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:

VideoJS - HTML5 Video Player for WordPress

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.
http://camendesign.com/end_of_vfe (2010-03-03)

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"

Download

The code for this plugin is now hosted on the WordPress repository. Please visit:
http://wordpress.org/extend/plugins/external-video-for-everybody/

You may be interested in using the External "Video for Everybody" plugin if:

  1. You want to offer ogg/theora or webm/vp8 video to those browsers that will play it
  2. You want to offer fallbacks for those browsers that will not
  3. 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.)
  4. 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:
    http://github.com/kwiliarty/vfe-sh
    (See the Theora Cookbook for more alternatives on how to encode .ogv files)
  5. You want to post videos easily and manage all videos in a consistent and efficient way

You will need to:

  1. Install and activate the plugin on WordPress 2.8 or higher
  2. Configure the plugin by going to Media > External VfE. (640x480 max dimensions for iPhone)
  3. Upload and point to a Flash player (.swf) for Flash fallbacks--the JW Player, for example
  4. 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.)
  5. 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.
  6. Add a shortcode to your page or post using the basic form:

    [external-vfe name="__VIDEO__"]

  7. Publish

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
width in pixels
height in pixels
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 video tag.
(This setting does not affect the poster called within the Flash object, so even if you are not including posters in your video tag, you may still want to create and upload an image poster file.)
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.

  • If you disable VideoJS from the Media > External VfE options page, the JavaScript and CSS files for VideoJS will not load making all other VideoJS setting irrelevant.
  • 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.