Input elements are interesting enough for a much longer and more extensive post than I have time for now, but here is one little tidbit I haven't read anywhere else. If you use an unsupported input type in a browser it falls back to text, what I didn't knew is that reading the type with JavaScript fails also. CSS attribute selectors are fine, only no JavaScript detection. See for yourself below...
Go and compare it with different browsers, just to see which does what.
This is the first in a serie of posts about html5, sharing the various things I learned the last few weeks.
The last few weeks I have been doing quit some research on html5 and the various new input types. All this out of sheer curiosity and for a presentation I held just yesterday at iprofs for Fronteers. I started with the full intention of holding a enthusiastic speech on how wonderful everything was and that the future is now.
Sadly my story was not so positive as I had hoped, although I hope that I didn't scare people away from html5, as I truly believe that is something you can use now. Maybe only a sub set if your audience still uses IE6 and you don't want to be dependent on javascript. Let me just show you some ways to savely use html5 now.
Older browsers don't support the new layout elements and are not able to style them, you could use javascript to help them. Or you could fake the semantics by using classes and div's. So instead of using :
<article>Some content</article>You could use:
<div class="article">Some content</div>And have your cake and eat it too, as in: Support older browsers and use the proper semantics that html5 bring you. You could use this same technique for the various other html5 layout elements.
And maybe there comes a time that everybody supports html5 and you can than search and replace the various elements and finally be one of the cool kids.
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:
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."
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."
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: ""