Apple, prove HTML5 is ready!

I LOVE online video. It is amazing to see major events published through a player I’ve built. With the increase of online video and the push to HTML5, I’m still waiting to see HTML5 video used for a high quality, live broadcast. Since Apple “fully supports” two platforms [see video below], prove HTML5 video is ready by using it for your live event on October 4, 2011. I want to see HTML5 video succeed and who better to do it than the, supposed, leader of the HTML5 movement. Apple, it is time to prove the 1st platform is fully...

HTML5 Video: Fullscreen

At the moment of this post, these features [except for Pseudo] are only possible in Safari 5.1, Chrome, and iOS but is a great stride in the progression of HTML5 video. There are a few new methods you can use to implement native fullscreen for video and even go fullscreen with html elements [ie – a div]. In the following code, I’m going to use jQuery for selectors but jQuery has nothing to do with the end result. If you go crazy over typing document.getXXXXX, I’m sure you still get the idea here. Fullscreen <video/> $("#myvideo").webkitEnterFullScreen(); * #myvideo is the specific <video/> element you want to take fullscreen. That’s all it takes. This works by opening the video element in the native player. The controls also become native but they look good so it isn’t a huge deal unless you’re definitely concerned about the visuals. Support: Safari 5, iOS [tested on iPad 2], and Chrome [including Android; tested on XOOM] Fullscreen Custom This one actually goes beyond video since you could literally take anything fullscreen. Google, Chrome needs this. Get’er done! This is a bit more involved but still not a huge deal and if you’ve done any fullscreen work in Adobe Flash it should seem somewhat familiar. function toggleFullscreen(){ try{ if(navigator.userAgent.indexOf("Safari 5\.1")){ if($(document).context.webkitIsFullScreen) $(document).context.webkitCancelFullScreen(); else $("#mydiv").context.webkitRequestFullScreen(); }else $("#myvideo").webkitEnterFullScreen(); }catch(error){ onFullscreenChange(); } } Let’s stop here and take a look at the different lines here. The first thing in the function is a try/catch and is imperative, not for video but for good coding practice. I guarantee things are bound to fail on other browsers/devices so don’t leave your code unchecked here purely...