Using the HTML5 Video and Audio Tag with GestaltDec 2, 2009 In Development By Hans Hugli
Gestalt supports a media player that can play a list of media files in all browsers that support Silverlight—this means IE, Firefox, Chrome and Safari. Extend the Media Player
Since we shipped the media player, I’ve added support for a button that shows/hides captions and simple 508 support.
All the code + XAML can (but is not required to) reside in a single location, on a different domain than the player. This means that when changes are made to the underlying player code + XAML on the remote server, all players that point to those remote files are automatically updated with the new functionality and UI, which makes for a great web developer experience!
For now, the player code is available on VisitMix.com with a default implementation of the media player. But you can also place and modify your own versions of the code + XAML on your domain, and have all media players that point to your domain’s files take on the UI and behavior of your version of the player.
Customize the Media Player for Your Domain
You can change the appearance of the media player by simply modifying the media.xaml file using a text editor or Expression Blend.
You can also add functionality to the Media player. Let’s say, for instance, that you want to create an audio player that plays stations from last.fm. Begin by adding a text field in the media.xaml. Then,add some classes that enable accessing last.fm API’s to the media.py file based on the textbox input—you now have a media player with new functionality.
Encode your Files in one Easy Step
Once you’ve converted the files, replace the files of the same name in the DLR directory. Make a request to your media player, and the player with the updated functionality will appear. Note: You’ll probably need to clear your cache and restart the browser for the changes to appear.
Again, all the files are available on CodePlex. There are even the beginnings of a last.fm station implementation up there as well.
Google’s Chrome browser has an implementation of the audio tag that plays a single audio file. I was unable to replace their player with the Gestalt version, since the Stop method on the player did not seem to work for me.
To prevent audio files from playing simultaneously in their implementation and ours, I found it necessary to disable the Gestalt audio player in the Chrome browser. The shipping version of Chrome does not yet have an implementation of the video tag, so the Gestalt video player works just fine.
Developing with Gestalt
Gestalt brings all the power of the Silverlight programming model to web developers, without requiring an integrated development environment. It’s nice to have an IDE when possible, so for Mac users we’ve provided TextMate bundles with support for Gestalt and XAML off the Gestalt downloads page. For Windows, the Web Platform Installer can install Visual Studio Web Developer Edition, plus the Silverlight tools. (See the tools section of the installer to install VSWDE 2008 and the Silverlight tools. Get it from http://www.silverlight.net/getstarted .
If you create a custom implementation of the Gestalt media player, let us know—we’ll link to it or place it in our Library. And if you find Gestalt useful on your site, shout it out and we will add a link. Let us know what you think by leaving a comment. If you tweet, follow us on Twitter to learn about new content, opinions and articles.