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.

I write a lot of javascript in my present project. Doing this, I just love firebug and more to the point the console.log function that it lets me use. Bummer is only that it doesn't work in IE, the one browser that needs javascript debugging most. It also throws javascript error in IE when used. That is something that can be avoided by cleanly remove all of those console.log statements before you send stuff to be tested.

But, as everybody knows in the real world people tend to forget such things. So in annoyance with these errors, I set out to recreate the basis console.log function for IE as well. In retrospect it turns out that I set out to create a better mouse trap, but hey, it was fun and good enough to share, so lets...

In my solution and do not worry, I will share other solutions but first I will speak my mind. The console.log function is not used, instead you use logger(message). This sends the message to message to the console, if there is any, or it creates an ul (with an id of 'logger') in which it sets li's with the individual messages. So without further ado, I present to you the code:

 /*
 * wilfred nas
 *
 * info@wnas.nl
 * http://www.wnas.nl/
 * http://snippets.wnas.nl/
 */

// to intitialize the logger set : var log = 'true';
// change to 'false' to remove logging statements from you app.
// or (better) remove all logger statements from your code.
var log = 'true';
//var log = 'false';
/*
 * the logger functionality is a attempt to recreate some of the console functions of
 * fire bug for IE, the browser where you need js debugging tools the most. *
 * to use it you replace console.log(msg) with logger(msg), this sends the msg to the console or
 * it creates an ul to receive your (LIst of) messages...
 */
/*
 * works in  safari 2, opera 9, camino, webkit, ie 6 and firefox 2 (with or without firebug).
 */
function logger (msg){
    if (log == 'true'){
        // first we need to do some browser sniffing, look below for the explanation.
        var b = navigator.userAgent.toLowerCase();
safari = /webkit/.test(b);
        /*
             we only sniff what we need...
            opera = /opera/.test(b);
            msie = /msie/.test(b) && !/opera/.test(b);
            mozilla = /mozilla/.test(b) && !/(compatible|webkit)/.test(b);
        */
// bummer, safari seems to think that it has a console, so we make sure that it goes through.
        if (window.console && !safari){
                console.log(msg);
            }
        else {
            if(!document.getElementById('logger')){
                var ul = document.createElement('ul');
                ul.id = 'logger';
                document.getElementsByTagName('body')[0].appendChild(ul);
            }
            var ul = document.getElementById('logger');
            var li = document.createElement('li');
            ul.insertBefore(li,ul.firstChild);
            li.innerHTML = msg;
        }
    }
}

I think that it is a nice solution to a real problem, if you want see my solution here. If you want to try other people's solutions, go and seek googles advice. Something that I should have done before writing my own stuff, but at least it helps me understand javascript a bit better. Something that is always good I think.

My advice to you is, either use my solution (and if you do, please let me know, I will be proud) or go and use faux console by Christian Heilman's. I think his is better javascript, as is to be expected...

The downside is that he wrote it to be included as a seperate piece of javascript and it still needs to have all of the console.log statements removed for the live code. Where as in my logger, all you have to do is change var log == 'true' to false to go live. I think that this is a strong point, in my situation where I deliver stuff to be tested in two day cycles, as it goes faster.