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.
Read this if you want to support Android phones with video as well
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!
{ 24 comments… read them below or add one }
sorry for the stupid question – maybe you could help people like me by putting width _before_ height in the example code, this would help sloppy readers
Thanks for the great plugin!
Glad you got your issue figured out and thanks for the compliment!
Video works beautifully in Safari (with a full screen option),
nicely in chrome (no full screen option),
And doesn’t work in firefox. Do I need a plugin in firefox for it to work?
Also, do I need to upload a .flv version for the flash fallback to work?
THank you for the nice plugin
You don’t need to add any other video type for the flash fallback to work. The flash fallback uses the mp4 video through Flowplayer.
Try adding this line to your site’s .htaccess file to get video to work in Firefox:
AddType video/ogg ogg ogv ogm
That didn’t seem to work.
Any other idea?
I don’t know anything about your setup or how you encoded the ogg video, so it’s hard to offer suggestions. Can you email me the details?
Nevermind … it works now … adding the line in .htaccess did the trick
I used the PlugIn to embed several videos in one WP pages. This seems to slow down loading considerably, since Safari immediately starts buffering all videos. This makes skipping in the last video incredibly slow, even on by ultra-fast office connection.
Is there a way to prevent Safari (in Firefox this seems less an issue – maybe only because the ogv-files are smaller?) from starting to buffer the videos immediately? (I know I could split the videos to single pages, but I would prefer to have them on one page….)
The page is: http://www.benutzerfreun.de/videos/videos-zu-den-beispielhaften-websites/
Try editing the universal-video.php file in the plugin folder. Look for this line:
‘options’ => ‘controls autobuffer’,
and change it to:
‘options’ => ‘controls preload=”auto”‘,
That might fix your issue.
Hey Rob, hope you good bro. I was looking for a plugin like yours for a while now, I haven’t tried it yet because I have a question.
With this plugin, is there anyway I can embed it into the my template? I see that it can be placed into a page but in my case that will get the video to go under the menu (my menu is almost have way down the page) and plus it will be combined with the sidebar which I can’t disable because of its use.
I would really appreciate it if you could help me out with this.
Thanks a lot
Keep up the great job.
Mike
No, this isn’t setup to where you’d be able to insert a shortcode into a theme file and have it work. It needs to be used in the post content.
If you wanted, you could put the appropriate shortcode into your post and copy the output and paste it into your theme where you want it, then delete the entry from your post.
Sounds good, I will give it a shot.
Thanks for your time.
Mike
Hi, great plugin, thanks a lot. I was just wondering whether you have any plans to support the webm format, and also I was wondering if you have a changelog to highlight what is in version updates?
Many thanks,
Frank
Hi,
I’m finding your plugin and tips very useful thanks.. just one thing, I’ve worked out how to get it to autoplay, but when it does there are no control functions on the vid.. any way to get both working?
Regards,
Stu
Stu, what did you change in the plugin file? Sounds like you may have removed the controls from the player.
Hi, I have a problem with Internet Explorer 9 and Windows 7. It seems to show only the poster frame, no controls, and nothing happens when the video is clicked. On Windows Vista or with Firefox on Win 7 everything is fine. FlowPlayer seems correctly installed as well (url is: http://www.benutzerfreun.de/videos/)
Any ideas?
jjac, try renaming your video file extension from .m4v to .mp4 and see if that helps. It may be that IE is a little touchy in that aspect. You’ll have to edit the plugin file on line 34 and change ‘.m4v’ to ‘.mp4′ for this to take effect.
Rob, thanks a lot – now it works!
Are there any drawbacks to this solution and should I encode my vids differently?
Ah, and one more thing for the record: I had to change m4v to mp4 in lines 38 and 40 as well.
And in IE, I don’t see the poster frames…
Hi Rob
I have managed to get everything to work fine, except in Chrome, there is no audio playback.
Can you help?
Hi, do you know why the shortcode is displaying in the browser and not the video ?
Did you paste the shortcode in the editor in HTML view? If not, try that.
Could I use this to post a video into a widget? It doesn’t look like it –when I put in a text widget, and insert the shortcode, the shortcode itself shows up, rather than the video. Any trick to this?
Thanks!
Russ
Try adding this to your theme’s functions.php file:
add_filter(‘widget_text’, ‘do_shortcode’);
{ 1 trackback }