MediaPlayer Webpart

Situation:
Customer wants to play media files in a structured way on a webpage, without popping up external viewers. The media files will be attached to pages in a list. Normally you would have to click on the attachment and launch a the viewer. This webpart plays the attached file embedded into the page.

Constraints:
Must be able to define player window size.
Must be able to handle multiple media types including .mov, .wma, .avi, .mpeg and flash.
Must be able to define control settings for each media type.

Solution:
Lets start with putting together the webpart class for this control.

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint.WebPartPages;

namespace MediaPlayer
{
public class MediaPlayer : System.Web.UI.WebControls.WebParts.WebPart
{
private string _media_string = string.Empty;
private string _media_file = string.Empty;
private string _control_width = string.Empty;
private string _control_height = string.Empty;
[Personalizable(PersonalizationScope.Shared), WebBrowsable(true),
WebDisplayName("Media File"),
WebDescription("The location of the media file.")]
public string MediaFile
{
get { return _media_file; }
set { _media_file = value; }
}
[Personalizable(PersonalizationScope.Shared), WebBrowsable(true),
WebDisplayName("Control Width"),
WebDescription("The width of the control.")]
public string ControlWidth
{
get { return _control_width; }
set { _control_width = value; }
}
[Personalizable(PersonalizationScope.Shared), WebBrowsable(true),
WebDisplayName("Control Height"),
WebDescription("The height of the control.")]
public string ControlHeight
{
get { return _control_height; }
set { _control_height = value; }
}
}
}

For lack of space, I will not include the editorpart code that I created for the control. In order to meet a constraint, I used the webpart properties to place default settings that the admin could set on the page and then placed similar settings in the editorpart so that the page creator could override the default settings.
Now that we have out class and properties defined, lets render our control. Inside our class lets add...

protected override void CreateChildControls()
{
MediaFile = GetMediaFile();
_media_string = BuildMediaString();
base.CreateChildControls();
}
protected override void RenderContents(HtmlTextWriter writer)
{
writer.Write(_media_string);
}

Now to the meat of the solution. We are going to generate our own html for this solution. In this way we can ensure exactly what is going to be writen to the browser. I would also like to mention that I am not including any of the browser variant code for other DOMs, you can figure that out :) Lets tackle embedding WMV. You can find the object/embed definitions for all media types at their associated owners sites.

internal string BuildMediaString()
{
StringBuilder sb = new StringBuilder (500);
if (string.IsNullOrEmpty(MediaFile))
{
sb.Append("No media file defined");
}
else
{
string[] tArr = MediaFile.Split((char)'.');
string type = tArr[tArr.GetUpperBound(0)];
switch (type.ToLower())
{
case "wmv":
sb.AppendFormat(
@"<object
style=""width:{0}px;height:{1}px""
classid=""CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95""
standby=""Loading Microsoft® Windows® Media Player components...""
type=""application/x-oleobject"" _ codebase=""http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"">
<param name=""filename"" value=""{2}"">
<param name=""autoStart"" value=""true"">
<param name=""showControls"" value=""false"">
<param name=""showstatusbar"" value=""true"">
<param name=""autorewind"" value=""true"">
<param name=""showdisplay"" value=""false"">
<embed
src=""{2}""
width=""{0}""
height=""{1}""
type=""application/x-mplayer2""
autostart=""1""
showcontrols=""0""
showstatusbar=""1""
autorewind=""1""
showdisplay=""0"">
</embed>
</object>
", ControlWidth, ControlHeight, MediaFile);
break;
case("avi")...

This HTML creates an object on the page and embeds the movie at the height and width specified in the webpart settings.

We find out what media type has been requested by splitting the file name or url and using the last index as our media type. For instance if the location is "mysite/lists/Videos/Attachments/my.big.movie.wmv, our array will contain "wmv" in bucket three.

You can redefine the object / embed settings for the control to match your desired look, feel and interactivity.

JMC