display videos in asp

8/7/2019 Display Videos in ASP

1/9

Display Videos in ASP.NET 2.0By Scott LysleAugust 29, 2007

This article shall describe the construction of a custom control used to play video on an ASP.NET web page. The

control is based upon the Windows Media Player active X control; with it you can add canned or live video to a web

page by setting a property or two at design time, or from the ASP.NET page itself.

Introduction

This article shall describe the construction of a custom control used to play video on anASP.NET web page. The control is based upon the Windows Media Player active X control;with it you can add canned or live video to a web page by setting a property or two atdesign time, or from the ASP.NET page itself.

Figure 1: Displaying Video on a Web Page with a Custom Control.

The Solution

The solution contains two projects; the first is the web custom control and the seconds is asample web site with two pages, each displaying the controls in use to display video. Thecontrol project is called "Web Video"; it contains a single web custom control called, "WVC".The demonstration website contained in the second project is called, "TestWVC". Thewebsite contains to web pages called "Default" and "Webcams".


2/9

Figure 2: The Solution Showing Both Projects.

The Code: Web Video - WVC Custom Control

The WVC custom control project is a web custom control project; it contains only a singlecontrol (WVC). This control wraps up the media player control and provides design timesupport for the control through a collection of properties used to set some of the variousproperties used by the media player control.

The only reference added to the project, aside from the defaults, was System.Design. System. Design is necessary to support some of the design time functionalityexposed by the control such as using the URL editor with the file path property of thecontrol.


3/9

Figure 3: Adding System Design to the Custom Control References.

The imports, namespace, and class declarations are as follows:

using System;using System.Collections.Generic;using System.ComponentModel;using System.Text;using System.Web;

using System.Web.UI;using System.Web.UI.WebControls;namespace WebVideo{

[DefaultProperty("FilePath")][ToolboxData("")]publicclassWVC : WebControl

{

Note that in the class declaration, the default property is set to "FilePath"; this property isused to set the URL to the actual media file to be played by the player control. By settingthis value to "FIlePath", whenever the developer adds the control to a web page, the

property grid will focus on this property first.

After the class declaration, the next block of code is used to declare a set of local membervariables, each of which shall be controlled by a related property:

#region Declarationsprivatestring mFilePath;privatebool mShowStatusBar;privatebool mShowControls;


4/9

privatebool mShowPositionControls;privatebool mShowTracker;#endregion

Following these member variable declarations, the next region of code shall be used toprovide the code for the properties which will be used to set and get the values for each of

the member variables (note the attributes provided for each property; the descriptionprovided is used in the property grid to describe what each property does):

#region Properties[Category("File URL")][Browsable(true)][Description("Set path to source file.")][Editor(typeof(System.Web.UI.Design.UrlEditor),typeof(System.Drawing.Design.UITypeEditor))]publicstring FilePath{

get{

return mFilePath;}set{

if(value == string.Empty){

mFilePath = string.Empty;}else{

int tilde = -1;tilde = value.IndexOf('~');if(tilde != -1){

mFilePath = value.Substring((tilde + 2)).Trim();}else{

mFilePath = value;}

}}

} // end FilePath property[Category("Media Player")][Browsable(true)][Description("Show or hide the tracker.")]publicbool ShowTracker{

get{

return mShowTracker;}


5/9


6/9

The last region of code contained in the custom control is that used to actually render thecontrol:

#region "Rendering"protectedoverridevoid RenderContents(HtmlTextWriter writer){

try{

StringBuilder sb = newStringBuilder();sb.Append(" ");sb.Append(" ");sb.Append(" ");sb.Append(" ");sb.Append(" ");sb.Append(" ");sb.Append("");writer.RenderBeginTag(HtmlTextWriterTag.Div);writer.Write(sb.ToString());writer.RenderEndTag();

}catch{

// with no properties set, this will render "Display PDF// Control" in a// a box on the pagewriter.RenderBeginTag(HtmlTextWriterTag.Div);writer.Write("Display WVC Control");writer.RenderEndTag();

} // end try-catch} // end RenderContents

#endregion

To render the control, the "RenderContents" method is overridden. Within a try-catch block,


7/9

the contents of the control are defined using a string builder; once defined, the stringbuilder is converted to a string and dropped within the beginning and ending div tags. Oncethe control is added to a page, the control will be contained within a div. As far as the stringbuilder goes, it sets the class ID of the object to point to the ID of the media player control,sets the code base, and then sets each of the parameter values used in the control toconfigure the media player.

In the catch portion of the try-catch block, if the control errors the words, "Display WVCControl" will appear on the page. This will happen if the file path property is not set (whichit will not be when the control is dragged onto a form). In order to prevent the lack of a filename causing an error, the control is rendered differently (and without the media playercontrol) as soon as it is added to the form.

Since the control is wrapped in a div; any of the properties also available to a div are alsoadded to the control's property grid (for example, one may set the border style, backgroundcolor, etc. of the control because those properties are available to the div).

The Code: Test Web WVCThe demonstration web project is comprised of two web pages; one page, the default,demonstrates a single control in use. It also uses a drop down list control set to autopostback; the list contains a set of items with the value property pointing to a valid sourceof media. When the drop down list is used, the media player's file path is set to point to thenew source of media. The second page contains four controls each set to a different sourceand with the control panel options enabled. The code is trivial and is not reported in thisdocument.


8/9


9/9

Figure 4: Demo Page One.

Figure 5: Demo Page Two.

Summary :

By wrapping up the media player control in a custom web control, it becomes very easy toembed or even dynamically embed the controls into web pages. By moving the coderequired to display a media player into the custom control, it is no longer to code out the

content into each page using the controls.

display videos in asp

Documents