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.

Now this is really good for us real web craftsman and women. Real knowledge of your field once again proves itself against frameworks. How much I loved the demos of jQtouch at last weeks @media ( or #wdx as it is called now ), I still think that using a library or a framework isn't the thing to do for speed. So Ipad and Iphone development will create a new demand for good old hand coders.

"Don’t rely on frameworks or what standards zealots tell you. In our case, a highly trimmed HTML page, with inline CSS, just some pure JavaScript without a framework and using the capabilities of the target platform (iPad) as much as possible allows for a lean page that loads almost instantly, caches well and works great offline. Yes, we could have used JavaScript and CSS frameworks, but sometimes less is more (and remember, you don’t need all the cross-browser heavy lifting that frameworks do for you)."

(Via Thomas Fuchs.)

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?

Here’s what happened: On his Mac, Ryan pulled up a site called Eco Zoo. It is, seemingly, a pretty intense example of Flash development — full of 3D rendering, rich interactions, and cute little characters. Then, he pulled up the same thing on his Nexus One. The site’s progress bar filled in and the 3D world appeared for a few seconds before the browser crashed. Ryan said (paraphrasing), “Whoops! Well, it’s beta, and this is an intense example — let’s try it again.”

"JeffCroft.com: On the Android Flash demo at FlashCamp Seattle: "

After a long wait, it's finally being released into the app store. Opera mini brings many things to the iphone:.

• tabbed browsing

  Keep several pages open at the same time and easily switch between them using tabs – just as you would on your desktop computer. On touchscreen devices, visual tabs even allow you to see a preview of the open pages you can select.

• Integration with the desktop

  Save, edit and organize bookmarks into folders. Sophisticated bookmark management allows you to keep track of a large number of your favorite sites. Turning on Opera Link even allows you to keep your bookmarks synchronized across Opera on your other connected devices, like your computer, so you always have your links when you need them.

• speed

  Opera Mini uses only a tenth of the bandwidth of other browsers, compressing Web pages by up to 90%. On Opera Mobile, turning on Opera Turbo compresses data up to 80% or leave Opera Turbo off to get full Web site data, as you would on a PC.

But the most important thing it brings to the iphone is choice. We can now choose to use either safari and webkit. This in turn will turn up the heat for on one hand the webkit developers, as Opera will be challenging them as they are doing on the desktop. On the other hand, it's a challenge for us lazy web developers who were developing for mobile safari alone. We now have a different browser to deal with.

So the real winners are the users, who now will encounter websites that are being made not only for mobile webkit, but for multiple browsers. Thus making sure the web moves forward...

If you want to see what opera is capable of, see it's Standards support chart. If you're wondering why the rendering is a tad different, look at this.