Sep 29, 2009 at 4:22 AM
Edited Sep 29, 2009 at 4:36 AM

This is written in Silverlight 3.
Version 2.1.0 - 09-28-09

  • Added Admin Module to upload video and manage data for XML file.
  • Fixed paging issue for the media player on the default screen.

Used the following resources to help create the admin module:

Create PNG file from video element:

File Upload (modified code from some of the project here)


Version 2.0.1 - 07-22-09

  • Changed default background color to white.
  • not using <asp:Silverlight> control anymore, it uses the object element.
  • added clipping to all featured videos elements so they have a radius of 10.

Version 2.0.0 - 07-20-09

New features include the following:

* Show the most 50 recent video clips uploaded (paging size of 10)
* Ability to mark video as featured (up to 6 are allowed)
* AutoComplete search box
* Search videos
* Paging capabilities (default page size is 25 on search)
* Modified XML data structure
* Modified media player UI
* Similiar Videos - when viewing a video a list will be provided to videos that are similiar
* XML data storage - no SQL required (100 records is about 42KB)
* Add Title,Description and Thumbnail for each video
* Fully customizable

Concepts involved

* WrapPanels
* AutoCompleteBox
* Child Windows
* ListBox
* ViewBox
* Perspective 3D
* Basic animation
* Media Player controls

Other Notes:

* This uses progressive downloading.  I hope to build in the ability to have it handle streaming
* The media player UI handles a 640x480 resolution video
* No web services involved, it just downloads the XML file and uses that in memory (100 records is about 42KB)
* Good framework for a media player. Could always use some more UI work since I'm not a designer, and framework work as well
* View home page for screenshots [url:http://xliteplayer.codeplex.com/Wiki/View.aspx?title=Home]

Implementation Notes

Unzip the file you downloaded
Open up the directory xLitePlayer2.Web
Copy the following directories to your website's root directory
 - ClientBin
 - xLitePlayer_data (needs read/write access)
 - xLitePlayer_media (needs read/write access)

Copy the Silverlight.js file to your website's root directory
Copy the <style> and <script> tags and also the code between the <body> tags into the page you would like to host the media player
 -  _Note: the code between the <body> tags are a few div's, these can be places anywhere within your web page.  For example, within another div, a table cell, etc..._
 - Configure the initParams section on the page you are hosting the silverlight app so it knows where the files are. This goes within the object element
      - <param name="initParams" value="FileUrl=http://localhost/XDevSoftware/xLitePlayer_data/xMediaPaths.xml,RootUrl=http://localhost/XDevSoftware" />

Admin Module Implementation Notes

Unzip the file you downloaded
Open up the directory xLitePlayer2.Web
Copy xLitePlayer.Admin.xap from the ClientBin directory to your ClientBin directory (if you haven't already)
If you haven't already give read/write access to xLitePlayer_media and xLitePlayer_data
Copy the following files to either the root of your website or a directory you have chosen
 - xLiteSave.ashx
 - xLiteUpload.ashx
Configure the initParams section on the page you are hosting the silverlight app 
 - <param name="initParams" value="FileUrl=http://localhost:6000/xLitePlayer_data/xMediaPaths.xml,RootUrl=http://localhost:6000,MediaDir=http://localhost:6000/xLitePlayer_media/,FileHandlerUri=http://localhost:6000/xLiteUpload.ashx,FileSaveHandlerUri=http://localhost:6000/xLiteSave.ashx" />

I recommend the following:

Change the width and height in the <object> element to width="850" height="700". 
 - <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" *width="850" height="700"*>

This is the size of the silverlight application itself. Otherwise it will take up the entire page.

You may want to add a style tag to the <div>