Problem

I recently came across a small problem. When trying to get a movie (using the html5 video tag ofcourse) I found out that the iPhone doesn't play movies larger than 640 x 480 pixels and with a base profile other than H.264. Don't believe me, but look at their page.

As the client really wanted his rather large movie on the page and did not wanted it to be scaled down a notch, I was presented with a challenge. He also really wanted it to work on his beloved iPhone... What is a guy to do?

Solution

After some time I came up with a solution and a rather simple one it is. I use the rather excellent html5media script to get it to work in browsers without support for the video tag and want it to work in as many browsers as possible. So I already have two different sources in my video tag.

Like this:

<video
	poster="pathto/poster.png"
	width="780"
	height="470"
	controls
	preload>
	<source
		src="pathto/movie.ogv"
		type='video/ogg; codecs="theora, vorbis"'></source>
	<source
		src="pathto/movie.mp4"
		type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
</video>

As the movie I tried to play was to big, the iPhone didn't wanted to play it. Turned out all I had to do was include a third source into the video tag, pointing to a iPhone specific file, like this:

<video
  poster="pathto/poster.png"
  width="780"
  height="470"
  controls
  preload>
  <source
    src="pathto/movie.ogv"
    type='video/ogg; codecs="theora, vorbis"'></source>
  <source
    src="pathto/movie.mp4"
    type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
  <source src="pathto/movie.m4v"
    type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
</video>

Here you go, a solution to play large video's on your website, without compromising the quality for the desktop and still get it to work on the iPhone...

I hope this will help someone and if you have a better solution, please let me know...

Links

Some stuff I used to get the whole video she-bang working:

camendesign

This got me started

html5media

And this is what I use now to get it to work.

Surpise, surprise...

"Trip Chowdhry, an analyst with tiny Global Equities Research, contends that 7 minutes of the June 7 keynote by Apple CEO Steve Jobs has been blocked off for a presentation by Microsoft (MSFT) to talk about Visual Studio 2010, the company’s suite of development tools. Chowdhry says the new version of VS will allow developers to write native applications for the iPhone, iPad and Mac OS. And here’s the kicker: he thinks Microsoft’s presentation could be given by none other than Microsoft CEO Steve Ballmer. (Or if not, at least Bob Muglia, who runs Microsoft’s server and tools business.)"

Will Steve Ballmer Show Up At The WWDC Keynote?

"But the Macalope will be surprised if people move away from the iPhone in droves because of a technology that eases the lives of developers instead of users."

(Via The Macalope Weekly

Yes, the iPad is going to be available in the Netherlands in July. As a developer I want to have one as soon as possible of-course, so I can test my stuff on it.

The big question now is, should I get one in june in the UK when I'm there for Web Directions @media, or should I wait a full month. Available in july will probably mean the end of july...

And in case you have been hiding under a rock, here is the keynote announcing the iPad.

After years of domination, finally IE's share is starting to slide down to a respectable level. Web developers rejoice! Go and read for your self here:

Internet Explorer's progressive slide continues: Microsoft's browser is down to 66.10 percent from 73.01 percent a year ago. Half of that loss has been taken up by Firefox (up from 19.03 to 22.48 percent), with Safari also benefiting (up from 6.31 to 8.21 percent).

See the source

And as for mobile, it seems even better for us:

If the breakdown is restricted to mobile platforms, the shares are (to the nearest whole number) iPhone/iPod touch 65 percent, Android 9 percent, Java ME 8 percent, Symbian 7 percent, Windows Mobile 6 percent, BlackBerry 3 percent, others 2 percent.

See the source

But as a word of warning, this may look good. But in my opinion we still have to cater some content to IE6 users, as each user is as important as the others. It just mean that we will have to jump through less hoops, as hopefully customers will be using a better browser than IE6.