You are reading a MIX Online Opinion. In which we speak our minds. Hans Hugli Meet Hans Arrow

Lab Notes

3Comment Retweet

Using the HTML5 Video and Audio Tag with Gestalt

Dec 2, 2009 In Development By Hans Hugli

It’s true: Gestalt enables you to implement HTML5 video and audio tags. With just a little bit of JavaScript, Gestalt parses out media tags and injects all the HTML you need to embed a video or audio application. The Gestalt media player is also open source and customizable. Check it out at http://gestalt.codeplex.com.

Cross-Platform Support

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

In order for the media.py and media.xaml files to work cross domain,they need to be encoded into a JavaScript file using the conversion tool. This tool simply converts the Python and XAML into a format that can be injected into a remote page.

To get started, type the original name of the file in the filename textbox in the convert tool. For example if it was media.py type “media.py” in the textbox, without the quotes. Click the convert button and paste the resulting JavaScript in the bottom textbox into a file with the same name of the original file, with a .js extension. In the case of media.py, paste the code into a file named media.py.js. Do the same for the media.xaml file.

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.

Side Note

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.

Follow the Conversation

3 comments so far. You should leave one, too.

Troy Peterson said on Dec 3, 2009

So much of what we want to do with Nibipedia are going to get so much easier. 2010, the year the Web changed forever.

Troy
CEO
Nibipedia

Burberry Online Shop said on Apr 27, 2012

great advice and discussing,I'll get this amazing for me .thanks!

Burberry Shoes said on May 17, 2012

Excellent weblog, many thanks a lot for your awesome posts!