Silverlight Video Player

Download source - 437.47 KB

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

Default Web page "Default.aspx" with corresponding code behind: both to be placed in Web Application root directory
Silverlight Library file to be placed in Bin application directory
Ajax Library file (AjaxControlToolkit.dll) to be placed in Bin application directory
Player Styles ("Skin") files (XAML) collection, placed in "MediaPlayerSkins" folder
Player Initial setting stored in XML document file "SilverlightMediaPlayer.xml"
Media Item data stored in XML document file "SilverlightMediaItems.xml"
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:

License

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

About the Author

DrABELL

Chief Technology Officer
Infosoft Int'l

United States

Member

Dr. A. Bell (aka DrABELL), hi-tech consultant living in the US, has more than 20 years of software and electronic engineering experience. He published more than 100 technical articles and authored 37 inventions. Dr. Bell is the Windows/Internet technologies veteran, currently focused on: .NET,Mobile,Java,C#,SQL,HTML5,CSS3. He developed the most popular Silverlight Media Player (#1 Goog) and 3 Fractions Calculator (also #1 on Google/Bing/Yahoo). Sample online projects: