Gallery Server uses Silverlight to play wmv, wma, mp3, asf, and asx files. There are several skins available that modify the appearance and function of the player control. By default, the
Professional skin is used for video and
AudioGray is for audio:
[img]http://lh6.ggpht.com/_qh4427KVFsk/SZBvAbusMtI/AAAAAAAAAFY/-z9aUueEi5k/Skin_professional%5B4%5D.jpg?imgmax=800[/img]
[img]http://lh3.ggpht.com/_qh4427KVFsk/SZB7j7SDQ-I/AAAAAAAAAFw/nq6ksU_hKFg/Skin_audiogray%5B5%5D.jpg?imgmax=800[/img]
Later in this post you can see sample images of the rest of the skins.
Gallery Server includes eight different skins. A skin is a .xaml file and is stored in the gs\skins\mediaplayer directory. To use a different skin, update gs\config\galleryserverpro.config to refer to the desired .xaml file for the relevant media type. For example, the rendering for Windows Media files (.wmv) is defined like this in galleryserverpro.config:
Code:<mediaObject mimeType="video/x-ms-wmv">
<browsers>
<browser id="default" htmlOutput="<div id='mp1p'></div>"
scriptOutput="Sys.UI.Silverlight.Control.createObject('mp1p', '<object type="application/x-silverlight" id="mp1" style="height:{Height}px;width:{Width}px;"><param name="Windowless" value="True" /><a href="http://go2.microsoft.com/fwlink/?LinkID=114576&v=1.0"><img src="http://go2.microsoft.com/fwlink/?LinkID=108181" alt="Get Microsoft Silverlight" style="border-width:0;" /></a></object>'); Sys.Application.add_init(function() { $create(Sys.UI.Silverlight.MediaPlayer, { "mediaSource": "{MediaObjectUrl}", "scaleMode": 1, "source": "{GalleryPath}/skins/mediaplayer/Professional.xaml","autoPlay":{AutoStartMediaObjectText} }, null, null, $get("mp1p")); }); Sys.Application.initialize();Array.add(_mediaObjectsToDispose, "mp1");" />
</browsers>
</mediaObject>
Notice the template specifies Professional.xaml. Change this to any valid .xaml file. For example, to use the Futuristic skin for .wmv videos, change Professional.xaml to Futuristic.xaml. Save galleryserverpro.config and your changes immediately take effect in the gallery.
Look in the gs\skins\mediaplayer directory for the complete list of available skins. An example of each skin is shown below.
Modify a skin by editing the .xaml file in any text editor. For the best design experience, use a program designed for .xaml such as Microsoft Expression Blend.
Skin samplesBasic (Basic.xaml)Lightweight .xaml file. Does not include any visible controls. Start/pause a video by clicking it with the mouse.
[img]http://lh4.ggpht.com/_qh4427KVFsk/SZBvBK3_kyI/AAAAAAAAAFc/FIOC9PJd1eM/Skin_basic%5B6%5D.jpg?imgmax=800[/img]
Simple (Simple.xaml)Does not include borders like the Basic skin, but a control panel appears when the mouse hovers over the video.
[img]http://lh5.ggpht.com/_qh4427KVFsk/SZBvB4JJwOI/AAAAAAAAAFg/lGK3Qr7wYbU/Skin_simple%5B4%5D.jpg?imgmax=800[/img]
Classic (Classic.xaml)[img]http://lh3.ggpht.com/_qh4427KVFsk/SZBvCyznJBI/AAAAAAAAAFk/fkIrX4qwZ7M/Skin_classic%5B4%5D.jpg?imgmax=800[/img]
Console (Console.xaml)[img]http://lh5.ggpht.com/_qh4427KVFsk/SZBvEqg62ZI/AAAAAAAAAFo/XSzLhwsLBDg/Skin_console%5B4%5D.jpg?imgmax=800[/img]
Expression (Expression.xaml)This skin uses a semi-transparent control panel that appears when you hover over the video, as seen below. Normally, the controls are hidden.
[img]http://lh3.ggpht.com/_qh4427KVFsk/SZBvFm9Mq9I/AAAAAAAAAFs/wgscqI6YBO8/Skin_expression%5B4%5D.jpg?imgmax=800[/img]
Futuristic (Futuristic.xaml)[img]http://lh3.ggpht.com/_qh4427KVFsk/SZBvHIrOVpI/AAAAAAAAAFQ/rQBtXC_iJyQ/Skin_futuristic_thumb%5B1%5D.jpg?imgmax=800[/img]
Professional (Professional.xaml)[img]http://lh6.ggpht.com/_qh4427KVFsk/SZBvAbusMtI/AAAAAAAAAFY/-z9aUueEi5k/Skin_professional%5B4%5D.jpg?imgmax=800[/img]
AudioGray (AudioGray.xaml)[img]http://lh3.ggpht.com/_qh4427KVFsk/SZB7j7SDQ-I/AAAAAAAAAFw/nq6ksU_hKFg/Skin_audiogray%5B5%5D.jpg?imgmax=800[/img]
Roger Martin
Creator and Lead Developer of Gallery Server Pro