Project Description
Silverlight Video Player sample implementation; AJAX extended. Demonstrates selectable Player Styles (skins), autoplay settings, chapters creation.

Working Demo Sample: http://www.webinfocentral.com/RESOURCES/SilverlightPlayer.aspx

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. Embedded YouTube
  2. Embedded YouTube with Playlist
  3. Silverlight Media Player
Sample screenshot
SampleVideo_AutoshowNY.jpg
NOTE: SAMPLE MOVIE/CONTENT IS SHOWN FOR INFORMATION/DEMO PURPOSE ONLY! PLEASE DO NOT COPY/DISTRIBUTE

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 files(V. 2.0/3.0) to be placed in Bin directory
3. Ajax Library file (AjaxControlToolkit.dll) to be placed in Bin directory
3. Player "Skin" files (xaml) collection, placed in "MediaPlayerSkins" folder
  • AudioGray
  • Basic
  • Classic
  • Console
  • Expression
  • Futuristic
  • Professional
  • Simple
<%@ 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-->
                <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" 
                Width="600px" 
                Height="440px"
                PlaceholderSource="http://www.webinfocentral.com/VIDEO/JJ2008/ImgMain.JPG" >
                <Chapters>
                    <asp:MediaChapter Position="18" 
                        ThumbnailSource="http://www.webinfocentral.com/VIDEO/JJ2008/ImgChapters/13P1010042.JPG" 
                        Title="Chapter 1" />
                    <asp:MediaChapter Position="37" 
                        ThumbnailSource="http://www.webinfocentral.com/VIDEO/JJ2008/ImgChapters/18P1010048.JPG" 
                        Title="Chapter 2" />                              
                    <asp:MediaChapter Position="70" 
                        ThumbnailSource="http://www.webinfocentral.com/VIDEO/JJ2008/ImgChapters/11P1010036.JPG" 
                        Title="Chapter 3" />    
                    <asp:MediaChapter Position="107" 
                        ThumbnailSource="http://www.webinfocentral.com/VIDEO/JJ2008/ImgChapters/08P1010026.JPG" 
                        Title="Chapter 4" />  
                    <asp:MediaChapter Position="134" 
                        ThumbnailSource="http://www.webinfocentral.com/VIDEO/JJ2008/ImgChapters/06P1010010.JPG" 
                        Title="Chapter 5" />                                  
                  </Chapters>
            </asp:MediaPlayer>
      
            </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>

Code behind page:

//******************************************************************************
// Module           :   SilverlightPlayer.aspx.cs
// Description      :   code behind
//******************************************************************************
// Author           :   Alexander Bell
// Copyright        :   2009 Alexander Bell 
// Company          :   Infosoft International Inc.
// DateCreated      :   06/30/2009
// Modified         :   10/02/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.
//******************************************************************************
using System;

public partial class _Default : System.Web.UI.Page 
{
    // Silverlight Media Player 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 string _Source = "http://www.webinfocentral.com/VIDEO/JJ2008/WMV/JJ2008_100.wmv";
    
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            #region Media Player default settings
            MediaPlayer1.AutoPlay = true;
            MediaPlayer1.ScaleMode = System.Web.UI.SilverlightControls.ScaleMode.Zoom;

            // Dropdown to select Media Player styles (skin) selection
            cmbSkins.Items.Add(MediaPlayerSkins.Classic.ToString());
            cmbSkins.Items.Add(MediaPlayerSkins.Console.ToString());
            cmbSkins.Items.Add(MediaPlayerSkins.Expression.ToString());
            cmbSkins.Items.Add(MediaPlayerSkins.Futuristic.ToString());
            cmbSkins.Items.Add(MediaPlayerSkins.Professional.ToString());
            cmbSkins.Items.Add(MediaPlayerSkins.AudioGray.ToString());
            cmbSkins.Items.Add(MediaPlayerSkins.Simple.ToString());
            cmbSkins.AutoPostBack = true;
            // Professional style
            cmbSkins.SelectedIndex = 4;

            MediaPlayer1.MediaSource = _Source;

            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
}
ADDITIONAL ONLINE RESOURCES:
  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 select web browser and check its capabilities
  5. How to archive and back-up your online content
  6. Computer mouse triple-click is a convenient feature
  7. How to use online geocoders and interactive maps
  8. Search engine optimization and online concordance calculator

Silverlight™ SilverLight Microsoft Silverlight™ Silverlight™ Player Silverlight™ Media Player ASP.NET XAML WPF Video Player RIA C# AJAX HTML 5 CSS 3 jQuery

Last edited Feb 2, 2011 at 5:35 PM by DrABELL, version 16