Pixels, Code, and Beer
Playcanvas, an up and coming HTML5 Game engine, is making some waves on the scene by pulling off 3D development. It currently utilizes WebGL so IE is not supported, but you can bypass this with Google Chrome Frame if needed.
I took about five minutes to play with the engine, and felt it was definitely a good beginning, and I can’t wait to see what these guys can do. Check out the D.E.M.O. they have been working on for a preview of what the engine can do.
HTML has been the language of the web for over almost 20 years with the first standard being accepted in November of 1995. 
Many of us have been using the language even longer and throwing around <img> , <a>, and <p> tags are second nature. In the past it has always been hard to integrate video on the web without the use of plugins. At some point most of us have all been prompted to download the latest version of Flash, or update Quicktime to enjoy a video clip. With the latest HTML specification there is now a <video> tag that allows for native playback of video in the browser. This addition will allow for better playback performance, and will open up new and exciting ways of interacting with video on a web page.
VideoJS is a JavaScript API for accessing the HTML5 media library. There are many HTML5 video players now online, and many more are popping up every day. I chose to work with VideoJS for now, because it was the easiest for me to understand, and I really didn’t feel like experimenting with any others at the moment, although Popcorn.js is looking pretty “butter”! Using the VideoJS API also adds some functionality to the player that some browsers have not implemented such as fullscreen, subtitles, and it also provides a consistent JavaScript API for HTML5 and Flash. Another great benefit of VideoJS is that it is open-source and CDN hosted.
I began researching HTML5 players when my homie, Spencer, at Umami Media filled me in on a project he was working on for a client that is ready to start experimenting with HTML5 video. We were both interested in the control and functionality of the player. More specifically, we wanted to know if the playhead could be moved, or if we could pull meta information out of the video to be used in scripting. I decided to work on a small demo that night, and was able to rapidly put together a quick demo. VideoJS makes it easy to access most of the functionality we were looking, and with some custom JavaScript and jQuery you can do some pretty amazing things. Please click the link below to open up the demo and “play” around. The demo shows how information such as duration, play time, play head location, volume, and dimensions can be pulled from the player and displayed within the HTML. All of the players controls have also been built in HTML, and can be used anywhere on the page. Make sure to click the “Switch Source” button to see the video changed and play on auto. If you wait for 8 seconds on the second video (The Google Vid), you can see how I used some jQuery to animate certain parts of the player at specific times in the video. WOW! That was really cool, and fun to play with. Let the video play until the end and you will see an HTML <div> pop up letting you know the video has ended.
It is easy to see why HTML5 video will play an important role in the future of the web from just this simple demo. There are currently being applications built with the spec that allow for some truly amazing interaction. Check out this Sketchpad Walkthrough built with another HTML5 JavaScript API called Popcorn.js. The demo shows how the player can manipulate the HTML and generate a code walkthrough that is in sync with the media. DOPE!
Keep your eyes open, because we are going to see an explosion of this type of video interactions in the coming years. HTML5 may not be standard quite yet, but that shouldn’t stop us from playing with and pushing this technology forward. I am definitely looking forward to the future of the web, and technologies like this will surely sharpen that vision.