Click here to Skip to main content
Click here to Skip to main content

Silverlight Video Player

By , 19 Mar 2010
Rate this:
Please Sign up or sign in to vote.

Introduction

Silverlight™ provides extremely powerful rich internet applications 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 (Note: Browser compatibility and compliance with W3C standards provides tremendous advantage of web applications over their “installable” desktop/laptop counterparts: the latter are heavily platform/OS dependent and typically are much more labor intensive in regards to installation/upgrade/maintenance. To the contrary, web applications are essentially platform independent, adhered to the concept of “thin client”, which in simple words means “zero or near-zero installable and maintenance free”).

Silverlight™ is backed by a full power of Microsoft .NET technological framework and its rich integrated development environment. Certain knowledge of basic .NET programming (in particular, ASP.NET, C# and AJAX) is required in order to master the Silverlight™ coding technique, design pattern and practices. The good starting point could be a sample implementation of the embedded Silverlight™ video player, described in this article. Custom application program interface (API) is written in popular programming language C#. It provides plenty of customization features, such as programmatically setting of initial values and auto-play options, adding chapters, dynamically changing the visual styles (so-called “skins”), etc.

Working DEMO

A sample screen shot is shown below:

Background

Embedded video players represent the cornerstone components of modern rich internet applications (RIA), extending the web page interactivity, responsiveness, aesthetic appeal and overall user experience [1...3]. 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: HTML 5.0 and Microsoft Silverlight™.

Using the Code

PROJECT CONTAINS
  1. Default Web page "Default.aspx" with corresponding code behind: both to be placed in Web Application root directory
  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

SIMPLE SOLUTION

Following Silverlight Video Player demo page with corresponding code behind, released about 2 years ago, was addressing both practical and didactic aspects, containing all necessary components in order to run a rich internet application, based on Silverlight MediaPlayer, embedded in ASP.NET web page (.aspx) with AJAX extensions, added for better user experience:

Listing 1. Simple demo page (.aspx) showing the MediaPlayer element tag
Collapse
<%@ 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 VIDEO RESPONSE TO "WHAT'S YOUR NAME" BY BOSTON IS SHOWN 
		FOR DEMO PURPOSE ONLY!</h4>
            <h4>PLEASE DO NOT COPY/DISTRIBUTE!</h4>
            <hr />

        </form>
    </body>
</html>
Listing 2. Simple demo page (.aspx) code behind
Collapse
 //******************************************************************************
// 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
}
Listing 3. Simple demo page (.aspx) showing the MediaPlayer element tag
// Video Player initial settings		
#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  

BETTER SOLUTION

The sample solution shown above implements a hard-coded version of Silverlight Video Player in regards to the UI settings and Media Item selection. The current version has a data layer added for better content management and UI customization: Media Player initial settings and Media Item data are stored in separate XML documents files, namely: SilverlightMediaPlayer.xml and SilverlightMediaItems.xml. The corresponding custom XML reader/parser class library (SilverlightPlayerLib.dll) has been added to the project (it should be placed in Bin application folder). The sample data structure of both XML files is shown below:

Listing 4. Video Player initial settings stored in XML file
<?xml version="1.0" encoding="utf-8" ?>
<SilverlightMediaPlayer>
  <Width>600</Width>
  <Height>440</Height>
  <AutoLoad>true</AutoLoad>
  <AutoPlay>true</AutoPlay>
  <ScaleMode>Zoom</ScaleMode>
  <Skin>Classic</Skin>
</SilverlightMediaPlayer> 
Listing 5. Media Item data stored in XML file (includes Chapters element info)
<?xml version="1.0" encoding="utf-8" ?>
<SilverlightMediaItems>
  <SilverlightMediaItem ID="1">
    <Title>Demo</Title>
    <StartPosition>0</StartPosition>
    <ItemDuration></ItemDuration>
    <PlayLength></PlayLength>
    <AttributionVideo >Alexander Bell</AttributionVideo>
    <AttributionAudio>Boston-What's Your Name</AttributionAudio>
    <MediaSource>
      http://www.webinfocentral.com/Video/Demo/jj2008_100.wmv
    </MediaSource>
    <PlaceholderSource>
      http://www.webinfocentral.com/Video/Demo/ImgMain.JPG
    </PlaceholderSource>
    <Chapters>
      <Chapter>
        <Position>18</Position>
        <ThumbnailSource>
          http://www.webinfocentral.com/Video/Demo/ImgChapters/13P1010042.JPG
        </ThumbnailSource>
        <Title>Chapter1</Title>
      </Chapter>
      <Chapter>
        <Position>37</Position>
        <ThumbnailSource>
          http://www.webinfocentral.com/Video/Demo/ImgChapters/18P1010048.JPG
        </ThumbnailSource>
        <Title>Chapter2</Title>
      </Chapter>
      <Chapter>
        <Position>70</Position>
        <ThumbnailSource>
          http://www.webinfocentral.com/Video/Demo/ImgChapters/11P1010036.JPG
        </ThumbnailSource>
        <Title>Chapter3</Title>
      </Chapter>
      <Chapter>
        <Position>107</Position>
        <ThumbnailSource>
          http://www.webinfocentral.com/Video/Demo/ImgChapters/08P1010026.JPG
        </ThumbnailSource>
        <Title>Chapter4</Title>
      </Chapter>
      <Chapter>
        <Position>134</Position>
        <ThumbnailSource>
          http://www.webinfocentral.com/Video/Demo/ImgChapters/06P1010010.JPG
        </ThumbnailSource>
        <Title>Chapter5</Title>
      </Chapter>
    </Chapters>
  </SilverlightMediaItem>
</SilverlightMediaItems>

Finally, the demo solution (.aspx page w/code behind) looks like the following:

Listing 6. Demo page (.aspx) : major improvements made in the following code behind file
%@ Page Language="C#" 
AutoEventWireup="true"  
CodeFile="Default.aspx.cs" 
Inherits="ASPX_Default" %>
Listing 7. Demo page, code behind reflects the major improvements
//******************************************************************************
// 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
}
//******************************************************************************

Points of Interest

A couple of useful code techniques are highlighted by the following snippets:

Listing 8. Setting Chapters programmatically: code technique
Collapse
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;
Listing 9. Looping through enum to populate Drop-down list
// populate dropdown with Media Player styles (skin): looping through enum
foreach (MediaPlayerSkins skin in Enum.GetValues(typeof(MediaPlayerSkins)))
{ 
     cmbSkins.Items.Add(skin.ToString()); 
}
Listing 10. Changing the Video Player style ("skin") programmatically
protected void cmbSkins_SelectedIndexChanged(object sender, EventArgs e)
{
  MediaPlayer1.MediaSkinSource = "~/MediaPlayerSkins/" + 
	cmbSkins.SelectedValue + ".xaml";
}

History

The first revision of this Video player has been released about 2 years ago and became rather popular (more that 3000 downloads and counting). The current updates include the customization features via editable XML files, storing the Video Player's UI data and Media Item to play.

More demo/reading on Video Players and rich internet applications (RIA) topics is available at:

  1. Rich internet applications, part 2: Silverlight™ media player
  2. Rich internet applications, part 1: embedding YouTube™ video player into web page
  3. Rich internet applications, part 3: HTML 5 video player
  4. Embedded youTube Video Player with DB-stored playlist

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)

About the Author

DrABELL
President Infosoft International Inc
United States United States
Dr. A. Bell has 20+ years of Software and Electrical Engineering experience. He is Win/Web veteran, published 200+ articles and authored 37 inventions, currently focused on: Windows 7/8, HTML5, CSS3, jQuery, SQL, .NET, ASP.NET, WPF, C#, Speech Technology and Mobile apps. He's been among recent App submission winners (The Windows 8* & Ultrabook™ App Innovation Contest 2012). Sample pubs:
  1. Edumatter M12: School Math Calculators and Equation Solvers (contest winner)
  2. Engineering Calculator VOLTA-2013 (contest winner)
  3. HTML5 Best Practices: Table formatting via CSS3
  4. Edumatter-M12 for Windows, app overview
  5. Engineering Calculator VOLTA-814D
  6. CoolPhone: phone numbers-to-text converter
  7. SQL generates large data sequence
  8. Aggregate Product function extends SQL
  9. Top-50 Digital Cameras
  10. WebTV Project: Embedded YouTube Player (Goog #1 YouTube API for ASP.NET)
Dr. Bell is personally credited for 10+ Enterprise level projects (Finance/Investment, Engineering, Edu) w/total code base exceeding 250k lines; doing consulting in NYC for 20 yrs.
Follow on   Twitter

Comments and Discussions

 
QuestionMy vote is 5 Pinmembermuhamd yusuf5-Dec-11 19:31 
Questionmake a playlist Pinmemberspman201024-Sep-11 3:54 
QuestionError Messages When Running The Player With A Master Page. PinmemberVedran Firax10-Apr-11 21:48 
AnswerRe: Error Messages When Running The Player With A Master Page. PinmemberDrABELL11-Apr-11 2:53 
AnswerRe: Error Messages When Running The Player With A Master Page. PinmemberVedran Firax12-Apr-11 5:49 
GeneralRe: Error Messages When Running The Player With A Master Page. PinmemberDrABELL12-Apr-11 17:07 
Hello again,
 
Thanks for this clarification. Actually that Demo version of the Silverlight Media Player (link: Silverlight Media Player[^]) is build exactly so, using Master Page; no errors so far.
 
In regards to the problem you're facing: there might be some version compatibility issues because this development is couple years old (latest partial upgrade was to ASP.NET version 3.5). Also, MS AJAX extensions must be properly registered and web.config must contain proper settings to ensure the flawless application run.
 
Anyway, I plan to upgrade this Media Player to the latest/greatest MS Silverlight when I got a chance and couple of free weekends Smile | :) . In the meantime it's also worthy to focus on HTML5 Video/Audio tags, which represent the quintessential enhancement of entire RIA development paradigm.
 
Good luck with your project!
My Best, Alex B.
GeneralShort URL to Demo PinmemberDrABELL3-Jan-11 5:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140421.2 | Last Updated 19 Mar 2010
Article Copyright 2010 by DrABELL
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid