Project Description
Silverlight™ Media Player SDK (currently #1 on Google) with extended customization features allows setting initial values and adding chapters programmatically. It's developed in C# (ASP.NET, AJAX) and is compatible with Silverlight™ versions 2.0/3.0/4.0.

ARTICLES ON RIA TOPIC

  1. Rich internet applications, part 1: embedding YouTube™ video player into web page
  2. Rich internet applications, part 2: Silverlight™ media player
  3. Rich internet applications, part 3: HTML 5 video player
  4. How to customize YouTube video playback

DEMO:

  1. Silverlight Media Player
  2. NEW!!! WebTV Beta (YouTube Player)

Silverlight_Media_Player.jpg

NOTE: THIS CONTENT IS SHOWN FOR INFORMATION/DEMO PURPOSE ONLY! PLEASE DO NOT COPY/DISTRIBUTE !!!

INTRODUCTION

Embedded media players (video/audio) represent the cornerstone components of modern rich internet applications (RIA), extending the web page interactivity, responsiveness, aesthetic appeal and overall user experience. Adobe Flash™ (implemented, for example, in YouTube™) has tremendous installation base worldwide and currently dominates this sector of technology. At the same time, relatively new but rather promising technologies are actively penetrating the market of rich internet applications, most notably: Microsoft Silverlight™ and HTML 5.0.

Silverlight™ provides extremely powerful RIA development platform, helping to bridge the gap between web applications and their desktop counterpart in terms of user experience and dynamic content streaming. As an example, the latest highly sophisticated web-based HD video player, developed by Netflix™, is built on the Silverlight™ technology set and is compatible with all major web browsers, including the most popular Internet Explorer and Firefox. Silverlight™ is backed by a full power of Microsoft .NET technological framework and its sophisticated integrated development environment (Visual Studio 2008/2010). Silverlight™ Media Player, described in this article, implements application program interface (API), written in C#. It provides plenty of customization features, such as setting the auto-play options, adding chapters, dynamically changing the visual styles (so-called “skins”), etc.

PROJECT CONTAINS:

1. Default Web page "Default.aspx" with corresponding code behind: both to be placed in Application root directory (ASP.NET 2.0+)
2. Silverlight Library file to be placed in Bin application directory
3. Ajax Library file (AjaxControlToolkit.dll) to be placed in Bin application directory
4. Player Styles ("Skin") files (xaml) collection, placed in "MediaPlayerSkins" folder
5. Player Initial setting stored in XML document file "SilverlightMediaPlayer.xml"
6. Media Item data stored in XML document file "SilverlightMediaItems.xml"
7. Custom Silverlight Player XML reader/parser class library "SilverlightPlayerLib.dll" stored in Bin application directory

Available Styles include:

  • AudioGray
  • Basic
  • Classic
  • Console
  • Expression
  • Futuristic
  • Professional
  • Simple

Silverlight Media/Video Player DEMO : http://www.webinfocentral.com/RESOURCES/SilverlightPlayer.aspx

NEW! Also, check the new version of embedded YouTube Video player (ASP.NET SDK written in C#) implementing the latest HTML5/CSS3 features (click on the image below)

SIMPLE SOLUTION (AS DESCRIBED IN PREVIOUS RELEASE)

Listing 1. Following Demo page contains all necessary components in order to run a Silverlight Media Player:

<%@ Page Language="C#" 
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ Register Assembly="System.Web.Silverlight"
Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>

<%@ Register assembly="AjaxControlToolkit"
namespace="AjaxControlToolkit"
tagprefix="cc1" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>SILVERLIGHT MEDIA PLAYER | DEMO</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel ID="UpdatePanel1" runat="server" updatemode="Conditional" >
<ContentTemplate>
<div>
<!--STYLE SELECTOR-->
<div style="float:left">
<asp:DropDownList ID="cmbSkins" runat="server"
onselectedindexchanged="cmbSkins_SelectedIndexChanged" />
</div>
<div><h3>SELECT PLAYER STYLE</h3></div>
</div>

<!-- MEDIA PLAYER -->
<asp:MediaPlayer ID="MediaPlayer1" runat="server" />

</ContentTemplate>
</asp:UpdatePanel>

<hr />
<h4>THIS CONTENT IS SHOWN FOR DEMO PURPOSE ONLY!</h4>
<h4>PLEASE DO NOT COPY/DISTRIBUTE!</h4>
<hr />

</form>
</body>
</html>


Listing 2. Following code snippets demonstrates the Media Player initial settings programming technique:

#region Media Player initial settings
MediaPlayer1.AutoPlay = true;
MediaPlayer1.ScaleMode = System.Web.UI.SilverlightControls.ScaleMode.Zoom;
MediaPlayer1.MediaSource = _source;
MediaPlayer1.PlaceholderSource=_domain + @"VIDEO/Demo/ImgMain.JPG";
MediaPlayer1.Width=600;
MediaPlayer1.Height = 440;
#endregion


Listing 3. Chapters are added by the following coding pattern:

System.Web.UI.SilverlightControls.MediaChapter mc =
new System.Web.UI.SilverlightControls.MediaChapter();
mc.Position = 18;
mc.ThumbnailSource = @"http://www.webinfocentral.com/VIDEO/Demo/ImgChapters/13P1010042.JPG";
mc.Title = "Chapter1";
MediaPlayer1.Chapters.Add(mc);
mc = null;


...and the entire code behind page is looking as follows:

Listing 4. ASPX Code behind page:

//******************************************************************************
// Module : Default.aspx.cs
// Description : code behind
//******************************************************************************
// Author : Alexander Bell
// Copyright : 2009 Infosoft International Inc.
// DateCreated : 07/03/2009
// LastModified : 10/12/2009

//******************************************************************************
// DISCLAIMER: This Application is provide on AS IS basis without any warranty
//******************************************************************************

//******************************************************************************
// TERMS OF USE : This module is copyrighted.
// : You can use it at your sole risk provided that you keep
// : the original copyright note.
//NOTE: ALL .WMV/.JPG FILES ARE FOR DEMO PURPOSE ONLY: DO NOT COPY/DISTRIBUTE!
//******************************************************************************
using System;

public partial class _Default : System.Web.UI.Page
{

// Silverlight Media Player styles (skins)
protected enum MediaPlayerSkins
{
AudioGray,
Basic,
Classic,
Console,
Expression,
Futuristic,
Professional,
Simple
}

// media source
// NOTE: THIS .WMV FILE IS FOR DEMO PURPOSE ONLY: DO NOT COPY/DISTRIBUTE!!!
//**************************************************************************************
private const string _domain = @"http://www.webinfocentral.com/";
private string _source = _domain + "VIDEO/Demo/WMV/JJ2008_100.wmv";

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{

#region Media Player initial settings
MediaPlayer1.AutoPlay = true;
MediaPlayer1.ScaleMode = System.Web.UI.SilverlightControls.ScaleMode.Zoom;
MediaPlayer1.MediaSource = _source;
MediaPlayer1.PlaceholderSource=_domain + @"VIDEO/Demo/ImgMain.JPG";
MediaPlayer1.Width=600;
MediaPlayer1.Height = 440;
#endregion

// NOTE: ALL .JPG FILEs ARE FOR DEMO PURPOSE ONLY: DO NOT COPY/DISTRIBUTE!
#region Adding Media Player chapters

System.Web.UI.SilverlightControls.MediaChapter mc =
new System.Web.UI.SilverlightControls.MediaChapter();

mc.Position = 18;
mc.ThumbnailSource =
@"http://www.webinfocentral.com/VIDEO/Demo/ImgChapters/13P1010042.JPG";
mc.Title = "Chapter1";
MediaPlayer1.Chapters.Add(mc);
mc = null;

mc = new System.Web.UI.SilverlightControls.MediaChapter();
mc.Position = 37;
mc.ThumbnailSource =
@"http://www.webinfocentral.com/VIDEO/Demo/ImgChapters/18P1010048.JPG";
mc.Title = "Chapter2";
MediaPlayer1.Chapters.Add(mc);
mc = null;

mc = new System.Web.UI.SilverlightControls.MediaChapter();
mc.Position = 70;
mc.ThumbnailSource =
@"http://www.webinfocentral.com/VIDEO/Demo/ImgChapters/11P1010036.JPG";
mc.Title = "Chapter3";
MediaPlayer1.Chapters.Add(mc);
mc = null;

mc = new System.Web.UI.SilverlightControls.MediaChapter();
mc.Position = 107;
mc.ThumbnailSource =
@"http://www.webinfocentral.com//VIDEO/Demo/ImgChapters/08P1010026.JPG";
mc.Title = "Chapter4";
MediaPlayer1.Chapters.Add(mc);
mc = null;

mc = new System.Web.UI.SilverlightControls.MediaChapter();
mc.Position = 134;
mc.ThumbnailSource =
@"http://www.webinfocentral.com/VIDEO/Demo/ImgChapters/06P1010010.JPG";
mc.Title = "Chapter5";
MediaPlayer1.Chapters.Add(mc);
mc = null;
#endregion

#region Dropdown Style selector
// populate dropdown with Media Player styles (skin): looping through enum
foreach (MediaPlayerSkins skin in Enum.GetValues(typeof(MediaPlayerSkins)))
{ cmbSkins.Items.Add(skin.ToString()); }

// set dropdown autopostback
cmbSkins.AutoPostBack = true;

// select Professional style
cmbSkins.SelectedValue = MediaPlayerSkins.Professional.ToString();

MediaPlayer1.MediaSkinSource =
"~/MediaPlayerSkins/" + cmbSkins.SelectedValue + ".xaml";
#endregion
}
}

#region User Events
///<summary>Select Media Player Skin</summary>
protected void cmbSkins_SelectedIndexChanged(object sender, EventArgs e)
{
MediaPlayer1.MediaSkinSource =
"~/MediaPlayerSkins/" + cmbSkins.SelectedValue + ".xaml";
}
#endregion
}

BETTER SOLUTION

Media Player initial settings and Media Item data could be stored in a separate XML documents files, namely: SilverlightMediaPlayer.xml and SilverlightMediaItems.xml. Corresponding custom XML reader/parser class library (SilverlightPlayerLib.dll) has been added to the project (placed in Bin application folder. The sample structure of the XML files are shown below:

Listing 5. Media Player initial settings stored in the XML document

<?xml version="1.0" encoding="utf-8" ?>
<SilverlightMediaItems>
<SilverlightMediaItem ID="1">
<Title>NY International Auto Show 2010</Title>
<StartPosition>0</StartPosition>
<ItemDuration></ItemDuration>
<PlayLength></PlayLength>
<AttributionVideo >Alexander Bell</AttributionVideo>
<AttributionAudio>Michael Lington, Various Artists</AttributionAudio>
<MediaSource>
http://www.webinfocentral.com/Video/NYAUTO_2010/WMV/NY_AUTOSHOW_2010_US_CARS_100kbits.wmv
</MediaSource>
<PlaceholderSource>
http://www.webinfocentral.com/Video/NYAUTO_2010/ImgMain.JPG
</PlaceholderSource>
<Chapters>
<Chapter>
<Position>05</Position>
<ThumbnailSource>
http://www.webinfocentral.com/Video/NYAUTO_2010/ImgChapters/IMG_0758.JPG
</ThumbnailSource>
<Title>Chapter1</Title>
</Chapter>
<Chapter>
<Position>46</Position>
<ThumbnailSource>
http://www.webinfocentral.com/Video/NYAUTO_2010/ImgChapters/IMG_0972.JPG
</ThumbnailSource>
<Title>Chapter2</Title>
</Chapter>
<Chapter>
<Position>50</Position>
<ThumbnailSource>
http://www.webinfocentral.com/Video/NYAUTO_2010/ImgChapters/IMG_0982.JPG
</ThumbnailSource>
<Title>Chapter3</Title>
</Chapter>
<Chapter>
<Position>60</Position>
<ThumbnailSource>
http://www.webinfocentral.com/Video/NYAUTO_2010/ImgChapters/IMG_0609.JPG
</ThumbnailSource>
<Title>Chapter4</Title>
</Chapter>
<Chapter>
<Position>75</Position>
<ThumbnailSource>
http://www.webinfocentral.com/Video/NYAUTO_2010/ImgChapters/IMG_0627.JPG
</ThumbnailSource>
<Title>Chapter5</Title>
</Chapter>
<Chapter>
<Position>102</Position>
<ThumbnailSource>
http://www.webinfocentral.com/Video/NYAUTO_2010/ImgChapters/IMG_0639.JPG
</ThumbnailSource>
<Title>Chapter6</Title>
</Chapter>
<Chapter>
<Position>125</Position>
<ThumbnailSource>
http://www.webinfocentral.com/Video/NYAUTO_2010/ImgChapters/IMG_0878.JPG
</ThumbnailSource>
<Title>Chapter7</Title>
</Chapter>
<Chapter>
<Position>141</Position>
<ThumbnailSource>
http://www.webinfocentral.com/Video/NYAUTO_2010/ImgChapters/IMG_0895.JPG
</ThumbnailSource>
<Title>Chapter8</Title>
</Chapter>
<Chapter>
<Position>159</Position>
<ThumbnailSource>
http://www.webinfocentral.com/Video/NYAUTO_2010/ImgChapters/IMG_0893.JPG
</ThumbnailSource>
<Title>Chapter9</Title>
</Chapter>
<Chapter>
<Position>250</Position>
<ThumbnailSource>
http://www.webinfocentral.com/Video/NYAUTO_2010/ImgChapters/IMG_0883.JPG
</ThumbnailSource>
<Title>Chapter10</Title>
</Chapter>
<Chapter>
<Position>279</Position>
<ThumbnailSource>
http://www.webinfocentral.com/Video/NYAUTO_2010/ImgChapters/IMG_0952.JPG
</ThumbnailSource>
<Title>Chapter11</Title>
</Chapter>
</Chapters>
</SilverlightMediaItem>
</SilverlightMediaItems>


Finally, demo aspx page looks like:

Listing 7. default .aspx page (demo)

<%@ Page Language="C#" 
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="ASPX_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ Register Assembly="System.Web.Silverlight"
Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>

<%@ Register assembly="AjaxControlToolkit"
namespace="AjaxControlToolkit"
tagprefix="cc1" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<title>SILVERLIGHT MEDIA PLAYER</title>
</head>
<body>

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div style ="width:600px; margin-left:auto; margin-right:auto;">
<hr />

<!--AJAX UPDATE PANEL-->
<asp:UpdatePanel ID="UpdatePanel1" runat="server" updatemode="Conditional" >
<ContentTemplate>

<!--STYLE SELECTOR-->
<div>
<h2>SILVERLIGHT MEDIA PLAYER</h2>
<div style="float:left">
<asp:DropDownList ID="cmbSkins" runat="server"
onselectedindexchanged="cmbSkins_SelectedIndexChanged" />
</div>
<h5>&nbsp;&nbsp;MEDIA PLAYER STYLE SELECTOR</h5>
</div>

<!-- SILVERLIGHT MEDIA PLAYER -->
<asp:MediaPlayer ID="MediaPlayer1" runat="server" />

</ContentTemplate>
</asp:UpdatePanel>

<hr />
</div>
</form>
</body>
</html>

Listing 8. default .aspx demo page, code behind

//******************************************************************************
// Module : Default.aspx.cs
// Description : code behind
//******************************************************************************
// Author : Alexander Bell
// Copyright : 2010 Infosoft International Inc.
// DateCreated : 03/17/2010
// LastModified : 03/18/2010
//******************************************************************************
// DISCLAIMER: This Application is provide on AS IS basis without any warranty
//******************************************************************************

//******************************************************************************
// TERMS OF USE : This module is copyrighted.
// : You can use it at your sole risk provided that you keep
// : the original copyright note.
//NOTE: ALL .WMV/.JPG FILES ARE FOR DEMO PURPOSE ONLY: DO NOT COPY/DISTRIBUTE!
//******************************************************************************
using System;
using Infosoft_SilverlightMediaPlayer;
using System.Collections;

public partial class ASPX_Default : System.Web.UI.Page
{
// media source
// NOTE: .WMV FILE IS FOR DEMO PURPOSE ONLY: DO NOT COPY/DISTRIBUTE!!!
//*************************************************************************

#region page load
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{

#region Media Player initial settings
PlayerInit(ref this.MediaPlayer1);
#endregion

#region select media item from XML file
SetMediaItem(ref this.MediaPlayer1);
#endregion

#region Dropdown Style selector
// populate dropdown with Media Player styles (skin): looping through enum
foreach (MediaPlayerSkins skin in Enum.GetValues(typeof(MediaPlayerSkins)))
{
cmbSkins.Items.Add(skin.ToString());
}

// set dropdown autopostback
cmbSkins.AutoPostBack = true;

// select Professional style
cmbSkins.SelectedValue = MediaPlayerSkins.Professional.ToString();

MediaPlayer1.MediaSkinSource =
"~/MediaPlayerSkins/" + cmbSkins.SelectedValue + ".xaml";

#endregion
}
}
#endregion

#region player init settings from XML file
private void PlayerInit(ref System.Web.UI.SilverlightControls.MediaPlayer SLP)
{
SLMediaPlayer slm;
try
{
// read setting from XML file
slm = new SLMediaPlayer();
slm.GetPlayer();

// assign values to Silverlight Media Player
SLP.Width = slm.Width;
SLP.Height = slm.Height;

SLP.AutoLoad = slm.AutoLoad;
SLP.AutoPlay = slm.AutoPlay;

// read from XML and set player scale mode
switch (slm.ScaleMode)
{
case "stretch":
SLP.ScaleMode = System.Web.UI.SilverlightControls.ScaleMode.Stretch;
break;
case "zoom":
SLP.ScaleMode = System.Web.UI.SilverlightControls.ScaleMode.Zoom;
break;
case "none":
SLP.ScaleMode = System.Web.UI.SilverlightControls.ScaleMode.None;
break;
default: break;
}
}
catch { }
finally { slm = null; }
}
#endregion

#region read media item properties from XML file
private void SetMediaItem(ref System.Web.UI.SilverlightControls.MediaPlayer SLP)
{
MediaItems mi=new MediaItems();
System.Web.UI.SilverlightControls.MediaChapter mc;
try
{
// get Media item from XML
mi.GetMediaItem();

// set Media source
SLP.MediaSource = mi.MediaSource;
SLP.PlaceholderSource = mi.PlaceholderSource;

// add Chapters
if (mi.Chapters.Count > 0)
{
for (int i = 0; i < mi.Chapters.Count; i++)
{
mc = new System.Web.UI.SilverlightControls.MediaChapter();
mc.Position = mi.Chapters[i].Position;
mc.ThumbnailSource = mi.Chapters[i].ThumbnailSource;
mc.Title = mi.Chapters[i].Title;
SLP.Chapters.Add(mc);
mc = null;
}
}
}
catch { }
finally { mi = null; mc = null; }
}
#endregion

#region User Events
///<summary>Select Media Player Skin</summary>
protected void cmbSkins_SelectedIndexChanged(object sender, EventArgs e)
{
MediaPlayer1.MediaSkinSource =
"~/MediaPlayerSkins/" + cmbSkins.SelectedValue + ".xaml";
}
#endregion
}
//******************************************************************************

ADDITIONAL ONLINE RESOURCES: 'HOW-TO':

  1. Scientific Calculator ZENO-5000, User Manual
  2. Scientific Calculator ZENO-5000, Design Notes
  3. How to select web browser and check its capabilities
  4. How to use online geocoders and interactive maps
  5. Search engine optimization and online concordance calculator

POPULAR ARTICLES:

  1. Rich internet applications, part 1: embedding YouTube™ video player into web page
  2. Rich internet applications, part 2: Silverlight™ media player
  3. Rich internet applications, part 3: HTML 5 video player
  4. HTML 5, CSS 3 and Inflation Calculator
  5. Personal computer 2011: mostly USB 3.0, SATA 3.0, DDR 3 plus SSD/HDMI

SAMPLE PROJECTS':

  1. 3 Fractions Calculator (#1 on Google!)


Media Player | Silverlight Media Player | Silverlight™ | SilverLight | Microsoft Silverlight™| Silverlight™ Player | Silverlight™ Media Player | Video Player | Audio Player | ASP.NET | XAML | WPF | XML | RIA | C# | AJAX | HTML 5 | CSS 3 | jQuery | Web TV | Interactive Web TV | Internet TV | Web Broadcasting | Internet Broadcasting Studio | iPhone TV | Apple TV | Google TV |

Last edited Apr 14, 2013 at 3:44 AM by DrABELL, version 34