So I got this video from a friend, and I wanted to post it on my site, but I wanted to do it without using any Flash, or any plugins, and I wanted it to work on the iPhone, and Chrome, and Firefox, and IE…

Step 1: Convert the file.

First I took the file and used Miro Video Converter to make two versions of the file. The first version I made was using the “Theora” format. This is an Ogg format, and you basically only need to make it for the video to show up in Firefox. Future versions of Firefox will support the WebM format instead (Chrome supports it now), so when Firefox 4 comes out, use that format.

Next, use Miro again and this time make a version using the iPhone preset. This basically creates an MP4 version of the file, but at the right resolution to have it show up on the iPhone. Annoyingly, the original file was from an iPhone, so it should have played, but it wouldn’t on mine. I suspect that the resolution difference between the iPhone 4 (used to make the video) and the iPhone 3GS (which I have) is the problem. Regardless, I just used the preset to downscale the video resolution.

Step 2: Adjust WordPress’ settings

WordPress didn’t like me uploading these files. Turned out that it was because I’m on multisite. In the Network Admin screen, find the Network Settings menu option, go to the bottom of the page, and add the mp4 and ogv extensions to the list of allowed files. Also add webm while you’re there, for the future.

Note: If you’re not on multisite but still have problems uploading the files, then add this line of code to your wp-config.php file, to turn on the unfiltered_upload capabilities for administrators:

define('ALLOW_UNFILTERED_UPLOADS',true);

Step 3: Check .htaccess settings

One of the things WordPress relies on to know if it’s a video or not is the MIME Type. Some servers have these properly configured, some don’t. Doesn’t hurt to help the process along by explicitly defining some of them in the .htaccess file. For good measure, I added a bunch of common ones, just to be sure:

AddType text/xml .xml
AddType video/mp4 .mp4 .m4v
AddType video/mpeg .mpeg .mpg
AddType video/quicktime .mov
AddType video/ogg .ogv
AddType video/webm .webm
AddType audio/mp4 .m4a .m4b .m4r
AddType audio/mpeg .mp3
AddType audio/playlist .m3u
AddType audio/x-scpls .pls
AddType audio/ogg .ogg
AddType audio/wav .wav

Step 4: Upload the videos

Easy one. Go into the Media->Library and upload your two videos. After doing that, get the URLs of both of them.

Step 5: Make the post

Make a new post and type in everything you want to type in. Then make sure you’re in the HTML editing mode, and add this code to the post:

<video width="640" height="360" controls>
  <source src="http://example.com/wp-content/uploads/video.mp4" type='video/mp4'></source>
  <source src="http://example.com/wp-content/uploads/video.ogv" type='video/ogg'></source>
</video>

There’s a few things there you’ll need to manually edit.

Obviously the URLs need to point to your files. Also, it’s important that the MP4 one is first, some older iPad software doesn’t like it otherwise.

The second one is the width and height. Now, like with posting images, these don’t have to exactly match the actual width and height of the video. The browser will use these sizes and scale the video accordingly. However, you’ll want to get the aspect ratio correct, so you don’t stretch or squish the video into the wrong sized box. And you can leave the height and width out entirely to not scale it, if you got your sizes correct in the video itself. But it’s a good idea to have them there regardless, to clue the browser into the size beforehand and speed up page rendering. Also note that the iPhone doesn’t care about those width and height tags, since it will just show the video full screen when you tap on it.

Sidenote: Do NOT switch into Visual mode. TinyMCE will muck up this code, badly, and try to add a SWF player to it and Flash and a bunch of other stuff. This is probably by design, but I wanted to do this without Flash at all and see how that worked. Turns out to work fine in the browsers I tested.

Finally, preview and publish as normal.

Wantlist

One thing I haven’t figured out is how to target the iPhone specifically with a separate file. With this setup, Chrome and IE are now showing the iPhone file, which is lower resolution than the OGV file (which is at original resolution). In this specific case, the video was poor and so it doesn’t make much difference, but I’d prefer to have a separate file specified that only iPhones used without having to resort to user agent targeting.

EDIT: Turns out you can do this with a media query on the source that targets the iPhone. So here’s my new code:

<video width="640" height="360" controls>
  <source src="http://example.com/wp-content/uploads/video.iphone.mp4" type='video/mp4' media='only screen and (max-device-width: 480px)'></source>
  <source src="http://example.com/wp-content/uploads/video.mp4" type='video/mp4'></source>
  <source src="http://example.com/wp-content/uploads/video.ogv" type='video/ogg'></source>
</video>

The media attribute lets you specify a CSS3 Media Query. The max-device-width of 480px = iPhone. So desktop browsers will use the video.mp4 while the iPhone uses the video.iphone.mp4. I’ve confirmed that this works properly with Chrome.

It’s interesting to see that browsers can do this reasonably well, even if you do have to make a few different versions of the video.

Shortcode Plugin

At the suggestion of ipstenu in the comments below, I made this into a shortcode plugin. You can download it here:
HTML5 Video Shortcode.

This plugin has the advantage of being ignored by TinyMCE. :)

For me, May was the month of WordPress. A lot of interesting posts have been written and many of them have gone straight to my bookmark collection. And now it’s time to share some of these posts, so here’s a list of 6 valuable posts from the past month (May 2011) which I regret I didn’t come up with myself.

Today’s theme: WordPress comments

How to Attract Comments on your WordPress Blog and Increase Interactivity? by Lax

Let me start by linking to a post that explains why blog comments are important and gives some tips on how to attract more of them. A quick and worthy read.

WordPress Comment Plugins You Will Need For Your Website Success by Mitz Pantic

In this post Mitz shares a list of some really valuable plugins, divided into three sub-lists: ones that show the love, ones that encourage return visits, and ones that stop spam.

Advanced commenting systems for WordPress by Cameron Chapman

It’s where the real fun starts. In case you’re not aware of this, you can choose to ditch the native WordPress’ commenting system and go with something else. In this post Cameron gives a nice list of alternative commenting systems and describes their main features.

Top 3rd Party Commenting Systems, Platforms for WordPress and Why I Don’t Use Them by John Saddington

In this post John shares his opinion on what the top 5 commenting systems are. He also explains why WordPress native system might be better for most users despite all the features of other commenting platforms.

Migrating Your WordPress Comments to Disqus by David Lohmeyer

Disqus is one of the most popular commenting systems in the blogosphere. To be honest, I’m considering switching to it myself. Check out what David has to say on abandoning native WordPress commenting system and switching to Disqus.

How to install Facebook comments on your WordPress blog by Marko Saric

In this short post Marko shares his thoughts on why installing Facebook comments on your blog might be a good idea. He also gives a quick 6-step guide on how to actually do this.

Related Posts:

Was trying to upload some photos and noticed that the captions I had set on the photos in Picasa showed up as titles in WordPress instead of as captions. Examining the core code, I found that it’s a known issue, but that fixing it in the core isn’t so easy, since WordPress has to support a number of different image editing programs and such. Different programs use the EXIF fields in different ways.

But I mostly use Picasa for photo management, so I don’t care about those other programs. So I wrote a quick plugin to fix the problem with WordPress and Picasa photos. Basically it just rejiggers the attachment when it’s added (but not when it’s edited) and puts the caption in the right place.

<?php
/**
Plugin Name: Picasa Captioner
Description: Fix up WordPress to read Picasa Captions from EXIF info properly.
Author: Otto
Author URI: http://ottodestruct.com/
**/

add_filter( 'wp_read_image_metadata', 'picasa_adjust_caption' );
function picasa_adjust_caption($meta) {
	if (empty($meta['caption']) && !empty($meta['title'])) {
		$meta['caption'] = $meta['title'];
		$meta['title'] = '';
	}
	return $meta;
}

add_action( 'add_attachment', 'picasa_adjust_attachment' );
function picasa_adjust_attachment($id) {
	$attachment = & get_post( $id, ARRAY_A );
	if ( !empty( $attachment ) ) {
		$attachment['post_excerpt'] = $attachment['post_content'];
		$attachment['post_content'] = '';
		wp_update_post($attachment);
	}
}

The first release candidate (RC1) for WordPress 3.2 is now available.

An RC comes after the beta period and before final release. We think we’re done, but with tens of millions of users, a variety of configurations, and thousands of plugins, it’s possible we’ve missed something. So if you haven’t tested WordPress 3.2 yet, now is the time! Please though, not on your live site unless you’re extra adventurous.

Things to keep in mind:

  • With more than 350 tickets closed, there are plenty of changes. Plugin and theme authors, please test your plugins and themes now, so that if there is a compatibility issue, we can figure it out before the final release.
  • Users are also encouraged to test things out. If you find problems, let your plugin/theme authors know so they can figure out the cause.
  • Twenty Eleven isn’t quite at the release candidate stage. Contents may settle.
  • If any known issues crop up, you’ll be able to find them here.

If you are testing the release candidate and think you’ve found a bug, there are a few ways to let us know:

To test WordPress 3.2, try the WordPress Beta Tester plugin (you’ll want “bleeding edge nightlies”). Or you can download the release candidate here (zip).

Happy testing!

If you’d like to know which levers to pull in your testing, check out a list of features in our Beta 1 post.

I know you hate being criticized. Everyone does. But you don’t have to take it personally or even seriously every single time. Criticism is not something that should keep you from doing what you’re doing. The truth is there will always be people who want to stop you just for the sake of it. Sometimes you can deal with criticism in just one single step… check out my guest post at Lifehack.org to find out how.

How to Deal with Criticism in One Single Step

Focusing too much attention on absurd criticism destroys your productivity even more than answering emails does. I guess what I’m trying to say is that perfection is not such a brilliant idea as it may seem.

P.S. If you need some inspiration on having the right mindset check out what the Achuar Tribe can teach you about overcoming obstacles.

Related Posts:

Whether you think you can or you can't either way you are right.

 

Winners never quit and quitters never win.

 

Success is the ability to go from one failure to another with no loss of enthusiasm.

 

The best way to have a good idea is to have a LOT of ideas.

 

It does not take much strength to do things, but it requires great strength to decide what to do.

 

The journey of a thousand miles must begin with a single step.

 

We all die. The goal isn't to live forever, the goal is to create something that will.

 

I have not failed. I’ve just found 10,000 ways that won’t work.

 

Selling to people who actually want to hear from you is more effective than interrupting strangers who don't.

 

I’ve failed over and over and over again in my life, and that is why I succeed.

 

We are told that talent creates its own opportunities. But it sometimes seems that intense desire creates not only its own opportunities, but its own talents.

 

 

12 best quotations on success in plain text

“Whether you think you can or you can’t either way you are right” -Henry Ford

“Winners never quit and quitters never win” -Vince Lombardi

“Success is the ability to go from one failure to another with no loss of enthusiasm” -Sir Winston Churchill

“The best way to have a good idea is to have a LOT of ideas” -Linus Pauling

“It does not take much strength to do things, but it requires great strength to decide what to do” -Elbert Hubbard

“The journey of a thousand miles must begin with a single step” -Lao Tzu

“We all die. The goal isn’t to live forever, the goal is to create something that will” -Chuck Palahniuk

“I have not failed. I’ve just found 10,000 ways that won’t work” -Thomas Edison

“Selling to people who actually want to hear from you is more effective than interrupting strangers who don’t” -Seth Godin

“I’ve failed over and over and over again in my life, and that is why I succeed” –Michael Jordan

“We are told that talent creates its own opportunities. But it sometimes seems that intense desire creates not only its own opportunities, but its own talents” –Eric Hoffer

“You must do the thing you think you cannot do” –Eleanor Roosevelt

(images from Wikipedia)

Related Posts:

So you want to be a blogger… But what should be the topic of your blog? Is it OK to blog about your dog? Well, why not. Since people are finding success tweeting shit their dads say then why wouldn’t you be successful blogging about your dog…

Anyway, maybe doing a little research is a better idea after all, hence this post. To find out what I’m on about feel free to check out my guest post at YoungPrePro.

12 Audacious and Creative Niche Searching Ideas for Your Blog

Once you have your niche there are still some things yet to do. For example, you have to decide which domain is right for you, you have to find a WordPress theme (remember, free WordPress themes are evil), and last but certainly not least – you have to find some blog traffic sources.

Related Posts:

While looking at my backlinks today, I noticed a site in French had linked to my post about making photo galleries. He mentioned that the Google Translate wasn’t great. I took a look, and while I don’t know how good the text translation was, I did notice that Google strangely tried to translate the code as well, thus screwing it all up.

A quick search revealed that all one had to do was to add the “notranslate” class to any wrapping object to prevent its contents from being translated.

Now, I use the Syntax Highligher Evolved plugin to display code on my site (although I use an older version because I like the look and functionality of it better than the latest version). So I edited the plugin and found where it inserts the PRE tag, and added the notranslate class to it. And voila, now my code doesn’t get translated anymore.

Just a helpful tip for anybody who posts code on their sites.

Google rolled out their +1 button today. So I added it here. You’ll find it below all the posts. Try it out.

Here’s the simple-stupid plugin I wrote to do it. While you can just edit your theme, I like making these sort of things into plugins. That way, I can turn them off at will, and I know exactly where to go to change them without having to dive into my theme code. Also, if I change themes, the code still works on the new theme.

<?php
/*
Plugin Name: Otto's Google +1 Button
Description: Add a +1 button after the content.
Author: Otto
Version: 999
*/

add_filter('the_content', 'google_plusone');

function google_plusone($content) {
	$content = $content.'<div class="plusone"><g:plusone size="tall" href="'.get_permalink().'"></g:plusone></div>';
	return $content;
}

add_action ('wp_enqueue_scripts','google_plusone_script');

function google_plusone_script() {
	wp_enqueue_script('google-plusone', 'https://apis.google.com/js/plusone.js', array(), null);
}

I wrapped the button in a div so that I could style it. In my particular case, I’m floating it right and giving it a margin, same as the Twitter and Facebook plugins. One day, I’ll make all these little Google plugins more generic and configurable, and roll them into a Simple Google Connect plugin. :)

One thing I don’t like is that the +1 button only works for people who are logged into a GMail account. Sorry Google Apps users, you’re out of luck. Complain to Google until they fix it.

If you want to add more parameters to the plugin and reconfigure it, you can find out about the available parameters here: http://code.google.com/apis/+1button/#configuration

Just upgraded to the beta of 3.2. I like the new admin interface overall. Really, I do. But relatively minor things tend to bug me sometimes.

For example, I don’t much care for the Site Title being so tiny and hidden at the top of the admin screens. I like the site’s name to be big and prominent, as it’s a link to the front end of the site. On multi-site, it’s awfully nice to see at a glance what site I’m on. I often click that link to go to the front end of the site easily. So trying to navigate to the front end became difficult and hit or miss with this title being so tiny.

I also don’t like seeing the Page Title being so big and having a big ol’ icon there beside it. The Page Title strikes me as kinda useless. I mean, I know what screen I’m on.

So I wrote a quick tweak plugin to fix it. I’m posting it in case it bugs you as much as it bugs me. On a side note, it’s a quick little demo of how to modify the WordPress admin CSS quickly and easily.

<?php
/*
Plugin Name: Embiggen Site Title for WordPress 3.2 beta
Description: Embiggen the Site Title in wp-admin. Debiggen the Page headers. Ditch the useless icon.
*/
add_action('admin_print_styles', 'big_site_title');
function big_site_title() {
?>
<style>
.wp-admin #wphead {
	height: 42px;
}
.wp-admin #wphead h1 {
	font-size: 28px;
	#font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif; #uncomment this if you want to go to the sans-serif font
}
.wp-admin #header-logo {
	background-image: url("images/logo.gif");
	background-size:32px 32px;
	width:32px;
	height:32px;
}
.wp-admin .wrap h2 {
	font-size:16px;
	padding-top: 1px;
	padding-bottom: 0px;
	height:20px;
}
.wp-admin .icon32 {
	display:none;
}
</style>
<?php
}

Feel free to tweak further as desired. Also, WordPress might change further before 3.2 is released, so this may stop working or need further tweaking.