Project DescriptionSilverlight 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
- Rich internet applications, part 1: embedding YouTube™ video player into web page
- Rich internet applications, part 2: Silverlight™ media player
- Rich internet applications, part 3: HTML 5 video player
- How to customize YouTube video playback
DEMO:
- Embedded YouTube
- Embedded YouTube with Playlist
- Silverlight Media Player
Sample screenshot
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 directory3. Ajax Library file (AjaxControlToolkit.dll) to be placed in Bin directory3. 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:
- Rich internet applications, part 1: embedding YouTube™ video player into web page
- Rich internet applications, part 2: Silverlight™ media player
- Rich internet applications, part 3: HTML 5 video player
- How to select web browser and check its capabilities
- How to archive and back-up your online content
- Computer mouse triple-click is a convenient feature
- How to use online geocoders and interactive maps
- 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 |