large movies on iphone - a solution

video html5 iphone

07 Jul 2010

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.

← Home