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):

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.