This week's Dev Corner post comes from Mike Luongo and details using HTML5 to create a video player that lets you play multiple video streams at once.

HTML5 video player with PIP that is movable/sizeable/opaciable

I've been playing around with html5 and I have to say it's an exciting new technology! That's right it really deserves a bunch of !!!!! Why is it so cool? With just with a little bit of javascript (yawn) I was able to create a PIP (picture in picture) player with opacity for the web. This example lets you click and drag around the pip (even off the original video). You can click the video and make it large. So you might want to check it out here:

HTML 5 PiP Demo ( Works best in Chrome )

Download the code here

For a long article on how all this works check out this link: Dive into html5

The most important part of the article could probably be found in this single screen capture.

These are the video types that are supported by browsers. Note that you can give a video tag in html5 multiple source videos and if it is unable to play one of them it will try the next.

HTML5 PIP is something we might be able to use right now but would require more research and testing to figure that out. What we can take from this example is that it is an exciting preview of what is to come. The playback should only get better over time and better supported.

Michael Luongo is a software engineer who joined TechSmith in 1999 when the company was about 10 employees. Since joining he has worked on almost every product at TechSmith. He is currently working on the Camtasia Relay team. In his spare time Michael enjoys working on old cars which include a 62 Chevy Corvair, Manx dune buggy, and other vehicles. He also enjoys learning about new technologies. He recently finished a 3D first person shooter in Silverlight and is at work developing his first app for Android.