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.

Friday, July 3, 2009

Play Flash video in your gallery

There was recent activity in the forum with a user trying to play Flash video (.flv) in Gallery Server. He ended up getting it working by creating an HTML template in the configuration file galleryserverpro.config. His success sparked my interest and I checked into it further to see if this was something I can incorporate in the next full release.

He had used the JW FLV Media Player from longtail video, so I started there. After spending some time learning about the different features and playing with a few different configurations, I finally had something that worked great. I was just about to check in the code when it occurred to me that I should check the license. I should have done that in the first place, because there was trouble. It uses the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported license. It allows free use and distribution when used non-commercially, which would be fine for many of you, but not everyone.

So I started looking around. It didn't take long until I came across flowplayer. It is a good-looking player and easy to configure. The best part is that it is released under the GPL, the same license as Gallery Server. I am not a lawyer, and please correct me if I am wrong, but I think that means I can include it with Gallery Server and not have to worry about the legal details.

Here you can see a Flash video playing in Google Chrome (see it for yourself):

Screenshot of Flash video playing in Gallery Server Pro using the flowplayer

The next release of GSP will include this feature, but you don't have to wait. The beauty of GSP's innovative templating engine is that you can customize the HTML that is rendered for media objects by editing galleryserverpro.config. No changes to the source code are necessary, nor do you have to recompile.

To add support for Flash video in your gallery, follow these steps:

  1. Download flowplayer. Copy the following three files to the \gs\script\ directory in your gallery web application: flowplayer-3.1.1.min.js, flowplayer-3.1.1.swf, flowplayer.controls-3.1.1.swf
  2. Open \gs\config\galleryserverpro.config in a text editor. In the <mimeTypes> section, add an entry for the .flv file type: <mimeType fileExtension=".flv" browserId="default" type="video/x-flv" allowAddToGallery="true" />
  3. In the <mediaobjects> section earlier in galleryserverpro.config, add a template to define the HTML that is rendered for .flv files:
<mediaObject mimeType="video/x-flv">
<browsers>
<browser id="default"
htmlOutput="&lt;script type=&quot;text/javascript&quot; src=&quot;{GalleryPath}/script/flowplayer-3.1.1.min.js&quot;&gt;&lt;/script&gt;&lt;a href=&quot;{MediaObjectUrl}&quot; style=&quot;display:block;width:{Width}px;height:{Height}px&quot; id=&quot;player&quot;&gt;&lt;/a&gt;"
scriptOutput="flowplayer(&quot;player&quot;, { src: &quot;{GalleryPath}/script/flowplayer-3.1.1.swf&quot;, wmode: &quot;opaque&quot; }, { clip:  { autoPlay: {AutoStartMediaObjectText}, scaling: &quot;fit&quot; } });" />
</browsers>
</mediaObject>

That is it! Add a .flv file to your gallery and it should play in any browser that has Flash installed. The video will start automatically if you have the autostart option enabled on the Video tab in the Site admin area. The width and height are defined on that page, too, so if you want it bigger or smaller, change it there (and then re-synchronize to update the existing media objects).

Note: If you have trouble, make sure IIS is configured to serve .flv file types (MIME type: video/x-flv).

If you want to better understand the template - maybe you want to tweak it to suit your preferences - it is helpful to copy the contents of the htmlOutput and scriptOutput attributes to a text editor and un-escape it. That is, replace &lt; with <, &gt; with >, and &quot; with ". It will be a lot easier to understand. Make your changes, then re-escape it when you copy it back to galleryserverpro.config. There is more info about the templating engine in the Admin Guide.

I updated the demo site to include a Flash video, so feel free to check it out.