Thursday, July 01, 2010
Day 1 :: HTML 5
The project I'm working on involves taking a video heavy website and converting it into a HTML5 / CSS3 / Javascript / jQuery powered mobile website. The current site runs HTML4, Flash (of course!), CSS, and javascript. There are many events that occur in the flash file so its not going to be easy to convert this to HTML5. Not to mention, there are cookies being set and the page checks for there existance and actually changes what occurs on the page. Along the way, I'm going to ask the question, "Which is better for a developer? Flash or HTML5/CSS/Javascript?" I'm not an Apple fan and because I've used Flash for about 10 years and I've whipped up flash animations in no time, i don't see how html5 / css / js could possibly be better for a developer. I hope Adobe makes Flash Player 10 run really nice on the Android phones. I'm looking forward to it. I'm also interested to see how "painful" of a process it is to make a non-flash version of my site work across all browsers. For starters, I'm mainly concerned with Chrome and Safari because these are the two browsers found on the iPhone and Android devices. I have more research to do for RIM Blackberry phones.
The first step was taking one of the videos and getting it to the right format. I found a free open source program called HandBrake. So, I took a short video on my Android phone (I have the Droid) and I copied it to my computer and then I converted it to MP4 (H.264) format using HandBrake (just to see if it would work). I was then able to copy it to my cel phone and easily play it in the Android Gallery. Next test for video: Copy it to iPod Touch (oh boy, i have to use stupid iTunes to copy files to the iPod Touch. I can NOT just drag and drop files to the iPod Touch like i do with my Droid. Basically when i plug my Droid into the computer and hit the USB Mount button the phone shows up like another other external hard drive or USB Drive). Not being able to do this on the iPod Touch sucks! Everything goes through iTunes.).
The next thing i wanted to do was create a single HTML5 page and embed the video into the page using the HTML5 video tag to see what the player looked like. For now I'm mainly concerned with Safari and Chrome. I foresee, having to convert my files to OGG format too (can anyone suggest a free converter for this format too?) as well (This part is kind of sucks. Firefox won't adopt H.264 support because they fear sometime in the future that the license will be mighty expensive for H.264 have only promised free use of it since 2016. Then your guess is as good as mine. From what I've read, OGG sucks.
Google will be coming out with the open source VP8 codec. I'm looking forward to this because it will be something that likely all browsers will adopt (hopefully Apple will even embrace it.).
My page was pretty simple and so far i am impressed with the ease-of-use of the video tag. Seems to do exactly what one would expect and it does it very well. However i did notice that in Safari on PC when i went to fullscreen and then exited out of full screen the background color of my webpage changed from white to black. I think that is a bug. This bug might only appear if no background color is set, we will see during day 2 testing.
Here's my source code from my very first HTML 5 page.
Some quick things to point out. Notice the DOCTYPE at the top of the page. It's much shorter and cleaner then typical HTML4 DOCTYPEs. Kudos to HTML 5 for making that shorter and simple and backward compatible for older browsers.
The next few lines are basically the same as HTML4.
The next line is the HTML5 video tag. Nice! and it works as expected too. woot!
Note the line of text that says "Your browser does not support the video tag." In Internet Explorer, this message will display, so what this also means (i think) is that you could have a fall back Flash player for IE / Firefox and it will just work without any additional programming, so thats pretty cool (BUT, also very dumb at the same time. Apple, Google, and Microsoft have all adopted H.264. Firefox and Opera aren't interested in H.264. They use OGG. I'm thinking maybe a mp4 as the primary video, then a OGG files for Firefox / Opera, and then for older versions of browsers using Flash player OR maybe MP4 for Safari, Chrome, IE9, and Flash player for everyone else. So this kind of sucks now because no matter what way we go, we will still have to make multiple versions of the same video shit. Honestly, this is bullshit!!! The purpose of having these standards is should be so that everyone can use it and it be available for free. This makes me think that H.264 is NOT the best choices because its eventually going to require a license (2016 - prepare to pay up). VP8 should replace the H.264 because it is open source, owned by Google, and is a very good video codec (According to the specs, i have not actually used it yet). At least then, we can have just 1 video file instead of multiple versions for each device.)
The dream is one universal, free, video codec for everyone ... That points to VP8 as the solution, not H.264.
Ideally, I'd like to see one video format that will work with both HTML5 and Flash.
So, i think the video playing in HTML5 seems to be very easy and i like it. The next few steps are going to be, well, painful, I am sure.
Let's see what Day 2 brings us.