Monday, July 20, 2009

Play H.264 video and audio with Silverlight

Now that Silverlight 3 is out, with its new support for H.264 audio and video, several of you have been wondering how to play these files in Gallery Server Pro. I took a few minutes to look into this today, and it turned out to be really easy. Adding support is as simple as making a few edits to galleryserverpro.config. Here is what a H.264 video - with a file extension of .mp4 - looks like when played in Silverlight within Gallery Server Pro (live demo):

H264_video_514x507

This works even if you are still using .NET 2.0 on the web server. The next release of Gallery Server Pro will include support for this, but until then you can follow these directions to get it working in 2.3:

Note that I assume your H.264 files use the .mp4 and .m4a file extensions. They will need some adjustment if you use other extensions.

  1. Open \gs\config\galleryserverpro.config in a text editor such as Notepad.
  2. In the <mimeTypes> section, add an entry for the .m4a file type: <mimeType fileExtension=".m4a" browserId="default" type="audio/m4a" allowAddToGallery="true" /> (There is already an entry for .mp4.)
  3. Add .m4a and .mp4 to the silverlightFileTypes setting near the beginning of the file so that it looks like this: silverlightFileTypes=".mp3,.wma,.wmv,.asf,.asx,.mp4,.m4a"
  4. Add HTML templates for the .m4a and .mp4 file types in the <mediaObjects> section:
<mediaObject mimeType="audio/m4a">
<browsers>
<browser id="default" htmlOutput="&lt;div id='mp1p'&gt;&lt;/div&gt;"
scriptOutput="Sys.UI.Silverlight.Control.createObject('mp1p', '&lt;object type=&quot;application/x-silverlight&quot; id=&quot;mp1&quot; style=&quot;height:{Height}px;width:{Width}px;&quot;&gt;&lt;param name=&quot;minRuntimeVersion&quot; value=&quot;3.0.40624.0&quot; /&gt;&lt;param name=&quot;Windowless&quot; value=&quot;True&quot; /&gt;&lt;a href=&quot;http://go2.microsoft.com/fwlink/?LinkID=114576&amp;v=1.0&quot;&gt;&lt;img src=&quot;http://go2.microsoft.com/fwlink/?LinkID=108181&quot; alt=&quot;Get Microsoft Silverlight&quot; style=&quot;border-width:0;&quot; /&gt;&lt;/a&gt;&lt;/object&gt;'); Sys.Application.add_init(function() { $create(Sys.UI.Silverlight.MediaPlayer, { &quot;mediaSource&quot;: &quot;{MediaObjectUrl}&quot;, &quot;scaleMode&quot;: 1, &quot;source&quot;: &quot;{GalleryPath}/skins/mediaplayer/AudioGray.xaml&quot;,&quot;autoPlay&quot;:{AutoStartMediaObjectText} }, null, null, $get(&quot;mp1p&quot;)); }); Sys.Application.initialize();Array.add(_mediaObjectsToDispose, &quot;mp1&quot;);
" />
</browsers>
</mediaObject>

<mediaObject mimeType="video/mp4">
<browsers>
<browser id="default" htmlOutput="&lt;div id='mp1p'&gt;&lt;/div&gt;"
scriptOutput="Sys.UI.Silverlight.Control.createObject('mp1p', '&lt;object type=&quot;application/x-silverlight&quot; id=&quot;mp1&quot; style=&quot;height:{Height}px;width:{Width}px;&quot;&gt;&lt;param name=&quot;minRuntimeVersion&quot; value=&quot;3.0.40624.0&quot; /&gt;&lt;param name=&quot;Windowless&quot; value=&quot;True&quot; /&gt;&lt;a href=&quot;
http://go2.microsoft.com/fwlink/?LinkID=114576&amp;v=1.0&quot;&gt;&lt;img src=&quot;http://go2.microsoft.com/fwlink/?LinkID=108181&quot; alt=&quot;Get Microsoft Silverlight&quot; style=&quot;border-width:0;&quot; /&gt;&lt;/a&gt;&lt;/object&gt;'); Sys.Application.add_init(function() { $create(Sys.UI.Silverlight.MediaPlayer, { &quot;mediaSource&quot;: &quot;{MediaObjectUrl}&quot;, &quot;scaleMode&quot;: 1, &quot;source&quot;: &quot;{GalleryPath}/skins/mediaplayer/Professional.xaml&quot;,&quot;autoPlay&quot;:{AutoStartMediaObjectText} }, null, null, $get(&quot;mp1p&quot;)); }); Sys.Application.initialize();Array.add(_mediaObjectsToDispose, &quot;mp1&quot;);" />
</browsers>
</mediaObject>



Savvy observers will notice these templates are exactly the same as the Silverlight templates used for .wma and .wmv files with one exception: They add a line specifying the minimum required version is 3.0.40624.0. The Silverlight javascript uses this to make sure the user has the latest version before attempting to play the file. The other Silverlight-related media files (.wma, .wmv, .mp3, etc) will play in any release of Silverlight dating back to 1.0.

1 comment:

Lalisa said...

Excellent . thanks for sharing to develop this H.264 video and audio withSilverlight.