Universal Video: An HTML5 Video Plugin For WordPress
Universal Video is a simple plugin for WordPress that allows users to quickly and easily add HTML5 video to their WordPress blogs through the use of shortcodes.
As there is no overall consensus between web browsers on which video format to use for HTML5 video playback, users are required to provide multiple video formats in order for their videos to be viewable across all browsers. The typical HTML5 video process requires users to provide an “ogg” video, a “H.264″ video, and a flash version for browsers without HTML5 video capabilities. Universal Video simplifies the coding process when embedding videos to your blog.
How To Use Universal Video
You will need to have an ogg video (.ogv format) and a H.264 video (.m4v) with the same file name uploaded to your “uploads” folder inside the “wp-content” folder in your WordPress directory. (Example: “home-video.ogv” and “home-video.m4v”)
The basic shortcode for inserting HTML5 video into your posts or pages is simple:
[video src="filename" height="xxx" width="xxx"]
If you have two videos named “home-video.ogv” and “home-video.m4v” with video dimensions of 640px by 480px then the shortcode you would use is as follows:
[video src="home-video" height="480" width="640"]
And if you choose to use a poster image, simply upload your desired image to the “uploads” folder along with your video files in the “wp-content” folder and the markup would look like the following:
[video src="home-video" height="480" width="640" poster="home-image.jpg"]
This shortcode will generate the necessary markup for HTML5 video playback, and if HTML5 playback is not possible for the viewer, then the video will be presented in Flash format through the use of Flowplayer.
Notes:
- The video file extension is not needed in the shortcode. In fact, don’t put the extension in there at all. The shortcode fills that part in for you.
- Height and width are not technically necessary for HTML5 video playback. However, these dimensions are necessary for proper Flash playback.
- Universal Video supports the “.ogv” ogg video format and the “.m4v” H.264 video format. To convert your videos, it is recommended to use the Miro Video Converter and Handbrake.
- Future versions will include support for more video attributes such as “poster”. The latest release, version 0.2, supports poster images for HTML5 video.
Questions or comments? Leave your feedback below!
{ 70 comments… read them below or add one }
I like this video plugin a lot. Is there any way I could display the video within a lightbox if I’m using Lightbox2 on my site?
Hi Bryce,
I’m glad you like this plugin, I hope it makes adding html5 video to your site a lot easier.
As of right now, I haven’t gotten around to integrating this plugin with lightbox yet, but it is something that I would like to do in the future version.
Hi Rob,
Thank you for this easy to use and great plugin… I would also like to request a lightbox version. Thanks again.
I’m having issues watching the videos on my iPhone. The container works, but it can’t play the video. Just shows a big overcrossed play button.
Can you give me a link to what you have that’s giving you a problem with the iPhone?
I had a problem with playback in Firefox, but this fixed it:
“Please try creating an .htaccess file in the web root folder of the application, and add the following lines inside it:
AddType audio/ogg .oga
AddType video/ogg .ogv .ogg
Then, refresh the page in Firefox and check if there is still a problem.”
(From http://forum.webfaction.com/viewtopic.php?id=4159)
Yes, I have had problems with ogg playback before as well. You either have to add the mime type to the server settings or maybe do the .htaccess fix like you described.
Hi Rob and thanks for this great plugin.
I’m having some problems implementing it on my site. It works in iPhone / iPad and also it does fall back to the FlowPlayer in Firefox, but my video does not load or play at all in IE or Safari. I have the video in in .flv, .m4v as .ogv formats. Any tips?
Hi Taulant,
When you use this plugin you won’t need to include a .flv file for flash video playback. When a user is unable to view HTML5 video, the .m4v file is actually being played for them but through the Flowplayer script.
I have seen an issue a couple times where video playback wasn’t happening in IE, and it may have something to do with the location of the flowplayer script. What I did to fix this was to move both flowplayer scripts inside the “player” folder of the plugin to the root level of the Wordpress installation. Then I modified the universal-video.php file as follows:
$plpath = WP_PLUGIN_URL .’/player/flowplayer-3.2.1.swf’;
has to be changed to:
$plpath = $wp_url .’/flowplayer-3.2.1.swf’;
This is something I need to look into for the next upgrade of this plugin. I hope to have the newer version out that fixes any IE problems within the next week or so.
Rob,
One more question: HTML5 works fine, but the flowplayer doesn’t seem to be working for me. see: http://www.brycecorkins.com/blog/2010/problem-solution/
The video loads fine in chrome, but in FF I just get a big grey X. I looked at the page in Firebug and it seems like the swf is loading.. and that it’s got the correct path to the m4v.. so I’m not sure why it’s not coming up.
Any thoughts?
Bryce,
It doesn’t look like your server is set up to handle playback of ogg video. My server was the same way until I added a setting to fix it.
If you go into your hosting backend and add a mime type to your server settings you should be fine afterwards. I have a cpanel backend, so all I had to do was scroll down to the Advanced section, click on Mime types and add this:
MIME type: video/ogg
Extensions: ogg ogv ogm
Alternatively, you could also try adding the following 3 lines to your httpd.conf file if you prefer:
AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
Hopefully this solves your Firefox grey box problems.
Rob,
I added the mine types, cleared the cache (just to be safe) and it still wouldn’t load. I went ahead and removed the .ogv output option, just to try it– still had a grey box. Then I went and removed the .m4v output line.. just to see if the flash player would work. The flash player loads, and the controls, but never plays. Firefox shows an infinite loading animation, chrome and safari display a grey box where the video should be.
The video files in question are about 2-4 mb each.. could it be a filesize problem? Or maybe they haven’t been encoded properly? I used Miro and Handbrake.. but I could try again with different settings.
Bryce,
I am going to send you an email about this.
Rob,
Great plugin. I’ve gotten a test post to work with Safari and FireFox. So far so good. Quick question though: Is there a way to add a poster image?
I’ve added “poster=”http://mydomain.com/poster-image.png” between the [ ]‘s but it doesn’t load. I’ve confirmed that the image does load though by loading up the URL.
Is there a way to have a poster image or has it not been implemented yet? Thanks again.
Scott
Hi Scott,
I’m glad you like the plugin. I never implemented the poster attribute yet because there was a problem with playback of video in the iPad and iPhone if the poster image was included. It is supposed to have been fixed in the 4.0 iOS so I’ll be updating the plugin within a few days to support that.
Or alternatively, I could just email you a modified plugin file that supports the poster image. Let me know and I can get one sent to you tomorrow.
Hi Rob … thanks for your help so far,
I applied your changes and that seemed to do the trick until I checked IE. For some strange reason, my videos in IE will only play the sound but no image. In IE I also see a Javascript error “null is not an object”. The same videos work fine on FF, Safari, Chrome. Any ideas? It may very well be an issue with my site but it was working fine before.
Also, I’m interested in using poster images for my videos so looking forward to your upgrade. You mentioned that you omitted the poster image before because it was causing videos not to play on the iPhone … does it mean it will do the same now for < 4.0 OS?
Lastly
the flowplayer is adding extra padding on my videos, any way I can control that?
Thanks a lot for your time!
Can you send me a link to a video you have set up? I’d like to check it out and see the problems you are mentioning.
As for the poster function, I heard that iOS 4.0 was supposed to have that problem fixed. So I’ll have to insert that feature and update the plugin now.
Rob I just sent you the link.
Trying to use your plug-in for WordPress but probably getting something wrong. I have the m4v on the server that I am running wordpress on. Here is the syntax that I am using – [video src="http://www.domainname.com/video/001-MacandSerialPort.m4v"]
When I go to the webpage where I have the link in wordpress, here is the error that I am getting -[ERROR: No URL was passed to the generic video BBCode]
It is probably something simple that I am missing.
Thanks for your help,
Ron
Do you have the ogg version of the video as well? As in “001-MacandSerialPort.ogv”?
When you insert the shortcode into your post, you don’t need to enter the whole path to your video, just the filename without the extension. Do it in this format:
[video src="001-MacandSerialPort" height="xxx" width="xxx"]
You should put in the height and width dimensions for the flash fallback to be happy. And the default plugin setup assumes that you uploaded your videos to the “wp-content/uploads/” folder.
Hope this helps!
Rob,
Great update. The poster image works like a champ!
I second that.
However my poster images don’t work in Safari. Anyone else tested the poster images in Safari?
As things currently stand, the default setup of poster images don’t seem to work in Safari. Or Chrome for that matter. The poster images seem to flash on for a second or two, then the first frame of the video takes over and that is what is visible.
My understanding of what’s going on is that when webkit browsers such as Safari or Chrome load up a page with html5 video, they will show the poster image briefly until the video is loaded. Then the poster image disappears from sight.
Unfortunately, webkit browsers are set to preload html5 video, and will even ignore a ‘preload=”none”‘ video attribute.
I’ve seen a few javascript hacks to get custom poster images to display on webkit browsers. Some of them are ugly, but at this time it seems to be the only way to get poster images to work right in Chrome or Safari.
Hi,
I looking to add flash and HTML5 video playback to my wordpress site, and your plugin looks fantastic. I’m having an issue with the flash playback on firefox in OSX. What’s appearing is a gray box with a small X in it. Otherwise, it works fine in Safari and Chrome using HTML5.
Have you seen this issue before?
Thanks.
Ryan,
It sounds like your server isn’t configured to handle ogg video yet. If you look up a few comments there is some info on getting your server to recognize and deliver ogg video. It’s a pretty quick process, you just have to either add a mime type to your server configuration or add a few lines to the httpd.conf file.
I gave this a shot really quick on my local machine host, and it doesn’t seem to work. I am using .m4v videos, so could that be the problem?
Nevermind, I missed the part where it says we need both ogg and m4v videos. I got it all working. I just have one question, what version of Flowplayer is this? It seems to have no watermarks/branding like the free version does.
Also, is there any way to remove the Save Video As… menu from flowplayer?
Thanks.
You have an .ogv video uploaded as well, right? Firefox can’t play html5 video in the .m4v format
It is the free version of flowplayer. If you play the video in fullscreen you’ll see the flowplayer watermark in there.
I’m not sure about the save video as option, I haven’t done any fiddling around with that part
Ya, it’s all good now.
I think Flowplayer can support H264 playback through m4v or mp4. Why not support that so the same video can be played everywhere, instead of having to encode two video files.
Ryan,
In regards to encoding two different video files, unfortunately that’s the way it has to be for now as there is no universally accepted video format between the browsers for html5 video playback. Firefox and Opera use ogg video, while Safari uses the h.264 format. Chrome is able to use either ogg or h.264. IE9 is supposed to support html5 video when it comes out, and when it does it’s supposed to use h.264.
In order to use html5 video that is playable across all these browsers, then you have to offer both video types. Now if all these browsers would agree to support one video codec, then it would be easier to offer video online.
Ya,
The whole web standards thing is a huge pain right now. Your plugin looks great, and I’ll keep it in mind while I’m evaluating whatever else it out there.
Thanks for your help!
hi rob,
interesting plugin.
i’m testing it with an .m4v file (for now) but in IE I see a Javascript error “null is not an object”.
you can see it at http://blog.cssource.ro/2008/09/29/hello-world/
any tips?
I tried looking at your video in IE8 over here, and it showed up fine.
How did you encode your video for for html5 playback?
hi rob,
encoded with winx hd video converter, as .mp4, then renamed as .m4v.
it’s just right in safari and google chrome (firefox dont play m4v, it’s ok, dont have an ogv).
only in IE8 I see that error (in fact several “‘null’ is null or not an object”)
LE
tested with IE8 on windows7… same error.
well, in IE the video show up and play, but the error is there.
Hi Rob,
Since the last upgrade I’m also experiencing the null is not an object error in IE.
And maybe it is an idea to implement .mov for iPhone high / low bandwidth reference movies.
Hi Rick,
Can you send me the link to a video you’re having this problem with? I’d like to take a look at it and see the problem.
The .mov files for the iPhone is something I’ve thought about, and I will get it in there once I settle on the easiest way for this to happen.
i’m also waiting for a solution to the null is not an object error in IE.
Do you have a video setup that I can take a look at again?
pls take a look
http://blog.cssource.ro/2008/09/29/welcome/
thanks in advance
Hey Rob, I’m having a problem with the video showing up in Firefox. I have checked it across the other browsers and it seems to be working….just can’t get it to work on FF. I tried all of the above fixes. Any ideas?
it works in ff.
i just have uploaded an .ogv in the same folder as .m4v, both with the same name.
I got it working. Thanks. Is there a way to change the video size when playing back in Safari and Chrome. Both of these browsers play the video smaller than in FF.
Hi Rob,
The error was probably my own mistake, after reinstall Universal video the error was gone.
Adding support for apple’s reference movies is quite simple:
1. Purchase Quicktime pro
2. Export a video for the web. Activate export for iPhone, iPhone mobile, and local playback
3. a folder is created with 6 files
4. Delete the Readme.html file
5. Export the original movie to ogg
6. upload the ogg file and the iphone files directly in your wp upload directory
7. Last but not least: Change the Universal-video.php in
<?php
/*
Plugin Name: Universal Video
Plugin URI: http://robmcguire.net/universal-video/
Description: Quite possibly the easiest way to insert HTML5 video into your posts or pages | Usage instructions
Author: Rob McGuire
Version: 0.3
Author URI: http://robmcguire.net
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
*/
function video_shortcode( $atts, $content = null ) {
extract( shortcode_atts( array(
‘src’ => ”,
‘options’ => ‘controls autobuffer’,
‘width’ => ”,
‘height’ => ”,
‘poster’ => ”,
‘format’ => ‘auto’,
), $atts ) );
$fallbackext=’.m4v’;
$plpath = WP_PLUGIN_URL .’/universal-video/player/flowplayer-3.2.1.swf’;
$vloc = WP_CONTENT_URL .’/uploads/’;
$fallbackpl = ”;
$output .= ” . “\n”;
$output .= ” . “\n”;
$output .= ” . “\n”;
$output .= ” . “\n”;
$output .= $fallbackpl.”;
return $output;
}
add_shortcode(‘video’, ‘video_shortcode’);
?>
Hi Rob,
The error was probably my own mistake, after reinstall Universal video the error was gone.
Adding support for apple’s reference movies is quite simple:
1. Purchase Quicktime pro
2. Export a video for the web. Activate export for iPhone, iPhone mobile, and local playback
3. a folder is created with 6 files
4. Delete the Readme.html file
5. Export the original movie to ogg
6. upload the ogg file and the iphone files directly in your wp upload directory
7. Last but not least: Change the Universal-video.php in
$output .= ” . “\n”;
$output .= ” . “\n”;
$output .= ” . “\n”;
$output .= ” . “\n”;
$output .= $fallbackpl.”;
It seems that I can’t put any code in the comments….
By the way the error is still there in IE8. Check http://www.tagweb.nl/audi/video
Rob,
I can’t leave my url in here nor any code… Maybe I can send it to you by mail?
Great plugin! It has been exactly what I’ve been looking for all day. I have managed to get it working great on my iphone and all browsers except for Safari. On Safari it squishes the video too narrow. The video box is the right size, but the video is distorted too thin in the middle. Any idea if I did something wrong?
http://www.greybrucehosting.com/featured/paul-simon-bassist-bakithi-khumalo
Keep up the great work!
Thanks Jason!
I checked out your link and the video played just fine for me in Safari, Chrome, and IE. In Firefox I noticed that the controls were a little wider than the actual video. Are the dimensions of your .m4v video and the .ogv video identical?
Thanks for the quick reply Rob. I just noticed there is a 1 pixel difference in height between the files. I will re-encode and try that. I will let you know if that works.
Hey Rob,
I re-output and uploaded both files to make sure they were the same dimensions but am still running into the same problem on both Safari 5 for Windows 7 and Snow Leopard. The video player is the right size, but the video is compressed to a perfect square of the height of the video and is centered in the middle of the player. When it goes to full screen it goes back to the correct ratios. Anything else I could try? Thanks for all your help.
Jason
That may be where our differences lie. I have Safari 4 on Windows 7 and the first video looked and worked just fine. I only saw a difference in Firefox (which uses ogg video instead of the h.264 video Safari uses).
I see your changes in the video and it looks even narrower in Firefox.
Can you send me the original .m4v video to rob@robmcguire.net and I’ll take a look at it?
i’ve just upgraded to wordpress 3.0.1
now it seems that ‘universal video’ don’t work at all in IE.
Hi Rob,
Did some testing, and it seems that using Firefox 3.6.8 with Flash 10.0.45 is broke. Works on Safari 5.0.1. I had another Mac that was running Firefox 3.0 and it worked fine updated to 3.68 and updated flash on the other machine and it stopped working.
Thought I would let you know.
-Cheers
Also checked it on my iPad and the HTML 5 worked fine.
iPad has been updated with the latest firmware, which I think is 3.1
-Cheers
Excellent plug-in Rob! Using it on my site right now. Thank you for a great solution!
what a great plugin
Exactly what i was looking for. Thanks !!!
I am too experiencing some problems with this plugin. It’ll load just fine in Safari and Chrome. However in IE the load is painfully slow and in Firefox it’ll just be a grey box with a x. Any ideas?
It sounds like your server isn’t configured to handle ogg video, which is why you’re seeing the grey gox in firefox. There’s some tips on how to set up a server to accept ogg video in some of the comments above you may want to check out.
Do you have a link I could view to see the problems you’re having in IE?
Oh, sorry. Thought I included it. It’s http://adam.persturesson.com/information
I only uppladed a .m4v because I haven’t found a good converter for OSX yet and I thought it would fallback on flash in FF then.
Hi, We’ve just did some custom wordpress development for a client using yoru wonderful plugin! However, the video does not play on chrome… All other browsers are fine.
The site is currently on:
http://www.greybrucehosting.com/
What is the reason? Chrome seems to add the control and autobuffer tags where FF doesn’t. Is that the problem?
Weptile,
I checked your site in Chrome, Firefox and IE. The video does not play correctly in Chrome and IE, which suggests that your .mp4 video version is the problem. How did you encode your .mp4 video type for the site?
Hi Rob, thanks for the quick response. I was banging my head to figure out where I did something wrong (which is usually unlikely
). I forwarded your response to my client and he should know better about the encoding. I think he’ll drop a comment here soon.
Thank you very much and I’ll be following yor plugin for our future clients too. Take care.
Hi Rob,
Sorry it’s taken me a while to respond to your last question when you were talking to Weptile.
I have re-encoded all the videos with Handbrake and Miro. For the m4v I am using the Apple Universal default setting. It works great now except that in Chrome and IE I am losing the poster image and in Chrome on the front page the video is in 2 different windows, but you can only play one. When I try to play the other it just gives me a black box. I am running Windows 7. It’s still on the same link as Weptile posted above. Thanks!
Jason
@Jason,
The poster image in html5 video doesn’t play nicely with webkit browsers such as Chrome. I believe their standard practice is to show the poster image until the video is loaded and ready to go, then it reverts to showing the first frame of the video instead. A poster image for webkit browsers could be done another way, but that is something set for a future release of this plugin.
If you have a link to the problem video I’d love to check it out to see if there’s anything ore I could add. You can post the link here or just use my contact page.
Hey Rob,
Thanks! I figured that may be the problem so I am having them put the same poster image in the first video frame as well for the Chrome issue. Other than that things are working great. Videos play perfectly on the ipad and iphone. Thanks again!
Jason
Hi!
Thanks for sharing this plugin, its great!
Could i use .mp4 instead of .m4v to display videos on iphone?
Miguel,
You can use .mp4, you’ll just have to edit the plugin file and replace every instance of .m4v to .mp4 and you’ll be good to go. I think there’s only a few instances you’d have to change
{ 8 trackbacks }