|
If you want to customize the media player/viewer used by the media gallery, you need to modify the Media file preview control, which is used for displaying all types of files.
Control location: ~\CMSModules\MediaLibrary\Controls\LiveControls\MediaFilePreview.ascx.cs
The customization needs to be done in the Page_PreRender method, in the following block of code:
if (this.DisplayActiveContent)
{
if (ImageHelper.IsImage(mfi.FileExtension) && File.Exists(mfi.FilePath))
{
// Images are always processed by secure page
if (!this.UseSecureLinks)
{
url = MediaFileInfoProvider.GetMediaFileAbsoluteUrl(si.SiteName, mfi.FileGUID, mfi.FileName);
}
this.ltlOutput.Text = MediaHelper.GetImage(url, Width, Height, MaxSideSize, mfi.FileImageWidth, mfi.FileImageHeight, mfi.FileDescription);
}
else if (ImageHelper.IsFlash(mfi.FileExtension))
{
this.ltlOutput.Text = MediaHelper.GetFlash(url, this.Width, this.Height);
}
else if (MediaHelper.IsAudio(mfi.FileExtension))
{
this.ltlOutput.Text = MediaHelper.GetAudio(url, this.Width, this.Height, mfi.FileExtension);
}
else if (MediaHelper.IsVideo(mfi.FileExtension))
{
this.ltlOutput.Text = MediaHelper.GetVideo(url, this.Width, this.Height, mfi.FileExtension);
}
else
{
this.ltlOutput.Text = MediaHelper.ShowPreviewOrIcon(mfi, this.Width, this.Height, this.MaxSideSize, this.PreviewSuffix, this.IconSet);
}
}
else
{
this.ltlOutput.Text = MediaHelper.ShowPreviewOrIcon(mfi, this.Width, this.Height, this.MaxSideSize, this.PreviewSuffix, this.IconSet);
}
|
In this section of the code, you can define your custom output HTML for the defined file types (images, videos, audio files, flash, etc.), which ensures correct displaying of the defined file types (displays the image, plays the video, etc.).
Below, you can find descriptions on how to perform some sample customization of the control:
Play MP3 files using Windows Media Player
To play MP3 files using Windows Media Player, you need to change the following line:
this.ltlOutput.Text = MediaHelper.GetAudio(url, this.Width, this.Height, mfi.FileExtension);
|
to:
this.ltlOutput.Text = MediaHelper.GetVideo(url, this.Width, this.Height, mfi.FileExtension);
|
This is a workaround, as the GetVideo method returns Windows Media Player for all non-supported video formats.
Display or play custom file types
The following example shows the process of enabling playing of FLV videos using the JW FLV Player (see http://www.longtailvideo.com/players/jw-flv-player/).
1) you need to buy the appropriate license (for commercial purposes, for the required domain)
2) register the swfobject.js JavaScript (via the General -> Java script web part)
3) add your custom condition - add the following code:
else if (mfi.FileExtension.ToLower() == ".flv")
{
this.ltlOutput.Text = // HERE COMES HTML CODE FOR INSERTING FLV PLAYER (see example bellow)
}
else if (MediaHelper.IsAudio(mfi.FileExtension))
|
before this line:
else if (MediaHelper.IsAudio(mfi.FileExtension))
|
this is the example inserted HTML code:
"<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','" + Width + "','" + Height + "','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=" + url + "');
s1.write('preview');
</script>";
|
Use Lightbox for displaying images
This modification allows viewing images using Lightbox (see http://www.lokeshdhakar.com/projects/lightbox2/ or the Examples -> Webparts -> Listings and viewers -> Lightbox page on the sample Corporate site).
1) Register the required JavaScripts, e.g. using the General -> Java script web part.
2) Change the following piece of code:
this.ltlOutput.Text = MediaHelper.GetImage(url, Width, Height, MaxSideSize, mfi.FileImageWidth, mfi.FileImageHeight, mfi.FileDescription);
|
to:
this.ltlOutput.Text = "<a href=\"" + url + "\" rel=\"lightbox[gallery]\" title=\"" + mfi.FileTitle + "\"><img src=\"" + url + "\" border=\"0\" /></a>";
|
3) Modify the CSS stylesheet for correct displaying of images.
|