ListenToYouTube.com: "Youtube to MP3, get mp3 from youtube video, flv to mp3, extract audio from youtube, youtube mp3"

Will have to test this myself, but it looks promising...

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.

Just found a weird feature in Google's chrome browser, version 5.0.375.70. It seems that if you put the ogg src before the mp4, it won't play...

      <video 
        class="video" 
        poster="http://wnas.nl/files/movie/example.jpg" 
        width="780" 
        height="470" 
        controls preload>
          
          <source 
            src="http://wnas.nl/files/movie/example.mp4" 
            type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
          </source>

		<source 
           src="http://wnas.nl/files/movie/example.ogv" 
           type='video/ogg; codecs="theora, vorbis"'>
          </source>
    </video>

So you need to pay attention to one more thing when doing video and want it to work cross-browser...

And yes, I am aware that it won't play in IE and I don't care :). What I do care about is that the second video won't play in chrome for some reason, if anyone has a clue...

But what bothers me is that the iPhone won't play the thing if it's got a poster frame... So you need to omit that if you care about the iphone. I thought that they had that fixed with the ios4 upgrade, but apperently not...

Lot's of new (true) html5 features, like: offline storage and web workers... And fast

" It has innovative new features that improve the way you view the web. And powerful new tools to help developers enhance and customize the browsing experience altogether. Learn more"

(Apple - Safari - Browse the web in smarter, more powerful ways.)

"Collecting examples of creative, innovative, and unexpected use of emerging web technologies such as HTML5 and CSS3."

HTML5 Watch

A great piece by Jonathon Snook on flash and html5.

"Flash's downfall, however, has more to do with those wielding its power—the web developers and designers who misuse it—and less to do with the technology itself."

Filling in the Gaps - Snook.ca

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: "

Some interesting comments Opera's product analyst Phillip Grønvold on the future of flash. I think they are right, flash has it's place. But it's usage for video for example is an excellent example of what you should use HTML5 for nowadays.

"But flash as a video container makes very little sense for CPU, WiFi battery usage etcetera – you can cook an egg on [devices] once you start running Flash on them and there's a reason for that."

Don't get me wrong, flash is great for some stuff, but I even see it for building webforms ( with openLazlo ) and that is just plain stupid.

The best line I think was:

"But at Opera we say that the future of the web is open web standards and Flash is not an open web standards technology"

Opera joins in Jobs v Flash argument | News | TechRadar UK: ""

In this site I use several html5 elements and attributes. One of them is <input type="search" /> which gives me (for instance) a search button on my Iphone. It degrades to an text kinda input so it's backwards compatible.

What it also does is look kinda ugly in safari, with rounded corners and a frigging shadow and so on.

Default rendering in safari 4 os x

Custom rendering

The way to render this is this one line of css:

input[type="search"]{
  -webkit-appearance:textfield;
  /* textfield instead of searchbox */
  border: 1px solid #39c;
  /* and a border of course but that's not relevant :) */ 
}

But for now that's it, on simple line in your css and apple no longers controls the style of your search field and you can style it (semi) consistent over browsers. A complete list of webkit specific styles can be found on Qooxdoo.org.

As I know, one disadvantage is that the search box does not longer appear as the default one in safari. But in my opinion the search box is not in usage as of now, so people are now more baffled by a strange box than they recognize the search box. In the future, however I think that this trick is no longer needed nor wanted.

Right now I am working on a redesign of this site. Since I believe in open communication, I will be doing this redesign live. So no testing behind closed doors and so on.

I will be doing this live for all to see.

Please let me know what you think..
( and yes the theme will be made public... )

Update

strange, Habari just reverted to the default theme overnight, this is why I am back to k2...

Update 2

Happily hacking away at some css, while trying to set up a proper html5 structure. This is very interesting as it is a break from the old div's with id's and classes. That I got covered, now I am in new territory. Wish me luck...