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=""]

Downloads:
http://kevinwiliarty.com/openvideo/external-vfe-tester.mp4
http://kevinwiliarty.com/openvideo/external-vfe-tester.webm
http://kevinwiliarty.com/openvideo/external-vfe-tester.ogv

Support and License

The External "Video for Everybody" plugin is offered as is and without support under a GPL license.

26 Responses to “External “Video for Everybody””

  1. Adam Says:

    Can i use this video plugin in wordpress 2.9.2. Please tell me i am facing some problem while activating it.

  2. Kevin Says:

    I am using it with 2.9.2, and I have not had any trouble, but it depends on your having the resources to create the required media files and on having some location from which to serve them. The plugin is not a standalone, but rather a facilitator, and depending on your WordPress set-up, it can be a virtue that it does not have server dependencies.

  3. Kevin Says:

    I've added a little demo on this page. You can even use the shortcode provided to test without any additional configuration whether the plugin is working for you.

  4. Steven Says:

    People have been putting up Flash video on their WordPress blogs for years, and recently served from Amazon's S3 service. Now that Apple has released their iPad that will NOT show flash, I'm looking for a solution to show video on a WordPress blog and be able to view it on an iPad as well as on the current crop of browsers (IE, Firefox, Safari, etc.).

    Any thoughts on writing a post on doing this with your External "Video for Everybody" plugin?

    Thanks!

  5. Kevin Says:

    Thanks so much for asking. I see that there is a new version of Video for Everybody to accommodate iPads, and I have updated my plugin accordingly. I don't have an iPad, and I have not tested it myself.

  6. CJ Says:

    Hi, Trying to get the plugin to work but the controls don't show. Also, I was wondering if you knew a way you could have the image show and when you click the image have it pop up in a new window light box style window? Thanks!

  7. Kevin Says:

    Hi CJ,

    When I looked at the page linked from your initials I could see that you had tried the plugin on it, and I noticed the following problems.

    1. First, you do not seem to have created all of the files you will need. You have an .mp4, but there is no corresponding .ogv, and I did not find any poster images at the expected locations. In order for the plugin to work, you need to create four files for each video. Details above.
    2. In addition, the dimensions of the movie you are trying to play are too large for the area you are trying to play it in. The height and width specifications for the plugin will not change the dimensions of your source video; they change only the size of the display area. The .ogv file, if you had one, would actually scale to fit your dimensions, but your file would be bigger than it needs to be. An .mp4 file will not scale to fit display dimensions. You will need to modify your source video.

    If you are not committed to using Ogg/Theora video, then you might find it easier to work with a plugin like Viper's Video Quicktags which will not require you to create multiple files, but you will still need to resize your source video to fit the available dimensions.

    I do not foresee developing a lightbox approach at this time, though I imagine it could be done.

  8. RPG Master Says:

    Hey, I like how easy to use your plugin is, but I only want to use ogg. How might I get rid of the need to use more then just ogg? Or do you know of a good plugin for this (like that Viper's Video Quicktags you mentioned)?

  9. Kevin Says:

    Wouldn't it be great if "OGG-only" and "Video for Everybody" were synonymous? Maybe one day my plugin can go that way. In the meantime, if you search the WordPress plugin repository for "ogg" you should see a handful of results:
    http://wordpress.org/extend/plugins/search.php?q=ogg
    Maybe something there will be what you are looking for. I haven't used any of them myself.

  10. Kevin Says:

    Or actually, if you really want to serve straight OGG, it wouldn't be hard just to use html 5 video tags. That's even sort of the point.
    See, for example:
    http://w3schools.com/html5/tag_video.asp

  11. Edward Says:

    I am trying to use this plugin with Amazon S3 - S3 creates a URL path which includes a key and security ID - The plugin is not able to decipher the name and path. Any suggestions?

  12. Kevin Says:

    Thanks for the feedback. I am working on an update that will allow you to link to media files using a URL that contains a query string after the file name. I have never worked with Amazon S3, but I think that the change will address the problem you are having.

  13. Eric Says:

    Hey Webm (VP8) is now available, isn't Better Than H.264? why do you dont make a plugin to use this codec? is thinner than. mp4 and it is the future.

    Thanks for do VfE is very usefull and its easy to use it!

  14. wells Says:

    I have one issue.. It seems that with IE 8 It always trys to load the quicktime version but this doesn't work. I get the big Q?. If I uninstall quicktime it will go to the flash version. Is this a mime type issue in my /etc/mime.types of perhaps one to put in the .htaccess?

  15. Kevin Says:

    I wonder if you can view the test video on this page with IE 8. If so, then it is probably neither IE 8 nor the plugin that is causing the problem. I myself cannot recreate the difficulty you describe, though I believe you would see something like it if you were not including a QuickTime file for the src attribute of the embed tag. For the purposes of this plugin, you need to be adding two .mp4 files to your external directory. One of these is the actual movie: __VIDEO__.mp4; the other is a single-frame move: __VIDEO__-poster.mp4. At the moment, both files are required for success with QuickTime, and there is no flexibility on the naming. The rationale has been to provide a kind of poster so that browsers would load only the single-frame video until clicked, at which point the browser could start downloading and playing the actual movie.

    Actually, I am unhappy with my approach for two reasons, even though it works for me.

    1. It adds to the processing overhead for the videos, if only slightly, and...
    2. I don't really like how the videos behave. You have to click the poster video, but it shows up with play controls, and it would be easy for someone to think that they should click play rather than clicking the movie

    I have thought about trying to add a "click here" overlay for the poster, but lately I'm thinking that I should just follow the latest version of Video for Everybody and drop QuickTime playback, not because the code is lighter--though it is--but because the overhead is lower and the viewer experience is better.

  16. Kevin Says:

    The most recent version of Video for Everybody includes support for WebM. It is my intention to follow along as time permits, though I plan first to drop the QuickTime playback as mentioned in my response to wells.

  17. Sarah Says:

    If I have interactive media in my videos, will it be maintained if I export my videos over to this program?

  18. No Name Says:

    Hello, Is it possible that there is a small bug in line 172?

    {$path}{$name}.mp4{$query}

    Or am I missing something?

    Thanks for the great plugin!

  19. Kevin Says:

    You are correct. Many thanks for catching it!
    I've checked in a new version (0.7.1) that fixes the code to:
    {$path}{$name}.{$poster_extension}{$query}

  20. Kevin Says:

    @Sarah (above): I don't know what you have in mind exactly, and I am not speaking from experience, but I expect the answer is that interactivity will not be maintained.

  21. Gavin Says:

    Hi
    thought this plugin would be perfect for creating web video that was viewable by iphone, ipad and flash
    I installed it and ran your test script which worked perfectly.
    I uploaded my own test video in MP4 and Thoedora ogg to my amazon S£ account
    Uploaded flowplayer to my site and poined VFe at it.

    When I tested it, the video plays perfectly on ipad but not on my pc. Flowplayer appears but the video is not playing.
    I can click the download link at the mp4 version plays fine in windows media player. Can you help me figure out what the problem is. I am guessing it must be something to do with the transcoding of the mp4 or the location/settings for flowplayer.

    Any suggestions?

    Gavin

    Re

  22. Kevin Says:

    Hi Gavin,

    From what you describe it could be that your MP4 video has not been encoded as H.264. It's possible to use different video codecs with the MP4 wrapper. If your MP4 is not H.264, it would play on Apple systems, but not with Flash. I made this mistake myself a few times.

    If you're sure the video format is correct, then I suspect that my support for the query strings that Amazon uses is not right yet. I don't have an Amazon account, so it is not easy for me to test this feature myself, but I'd like to make it work. The problem might arise especially with Flash where the URL for the video is itself part of a query string. If you think this is the problem, could you share a link to a test video? I'll be happy to tinker.

  23. Hoodgrown Says:

    I would like to use this to display video only on an ipAd. Do I still have to convert to other formats as well?

  24. Kevin Says:

    The plugin is expecting to find at least an .mp4 and an .ogv file. I expect that it will work even if you provide only the .mp4, but you will still see download links for both types of files.

  25. TC Says:

    In my tests Firefox does seem to be auto-buffering the video when vjs="true" Well, the progress bar seems to indicate that anyhow. I have not tested with Safari 5. Chrome still seems to autobuffer now matter how vjs is set. Anyone else have the same problem?

    Otherwise, thanks for a simple and clean plug in. This has been the only 1 of 3 I have tried where the video worked on all browsers "out of the box." I like the ability to select my own flash player and the vjs to get more controls and a "full-screen" mode.

  26. Kevin Says:

    @TC: Thanks for the comment. I am seeing the same thing, and the news for Safari is not so good, either. I'm interested in getting this aspect to work better, but I'm not sure at the moment when my next opportunity will be. I also suspect that my power to change these browser behaviors is limited. The code is in there to prevent autobuffering, but it's being largely ignored.