Introduction

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.


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 a sample web site with two pages, each displaying the controls in use to display video. The control 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". The website contains to web pages called "Default" and "Webcams".


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 single control (WVC). This control wraps up the media player control and provides design time support for the control through a collection of properties used to set some of the various properties 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 functionality exposed by the control such as using the URL editor with the file path property of the control.


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

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

  1. using System;
  2. using System.Collections.Generic;
  3. using System.ComponentModel;
  4. using System.Text;
  5. using System.Web;
  6. using System.Web.UI;
  7. using System.Web.UI.WebControls;
  8. namespace WebVideo
  9. {
  10. [DefaultProperty("FilePath")]
  11. [ToolboxData("<{0}:WVC runat=server></{0}:WVC>")]
  13. public class WVC : WebControl
  15. {
Note that in the class declaration, the default property is set to "FilePath"; this property is used to set the URL to the actual media file to be played by the player control. By setting this 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 member variables, each of which shall be controlled by a related property:
  1. #region Declarations
  2. private string mFilePath;
  3. private bool mShowStatusBar;
  4. private bool mShowControls;
  5. private bool mShowPositionControls;
  6. private bool mShowTracker;
  7. #endregion
Following these member variable declarations, the next region of code shall be used to provide 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 description provided is used in the property grid to describe what each property does):
  1. #region Properties
  2. [Category("File URL")]
  3. [Browsable(true)]
  4. [Description("Set path to source file.")]
  5. [Editor(typeof(System.Web.UI.Design.UrlEditor),
  6. typeof(System.Drawing.Design.UITypeEditor))]
  7. public string FilePath
  8. {
  9. get
  10. {
  11. return mFilePath;
  12. }
  13. set
  14. {
  15. if (value == string.Empty)
  16. {
  17. mFilePath = string.Empty;
  18. }
  19. else
  20. {
  21. int tilde = -1;
  22. tilde = value.IndexOf('~');
  23. if (tilde != -1)
  24. {
  25. mFilePath = value.Substring((tilde + 2)).Trim();
  26. }
  27. else
  28. {
  29. mFilePath = value;
  30. }
  31. }
  32. }
  33. } // end FilePath property
  34. [Category("Media Player")]
  35. [Browsable(true)]
  36. [Description("Show or hide the tracker.")]
  37. public bool ShowTracker
  38. {
  39. get
  40. {
  41. return mShowTracker;
  42. }
  43. set
  44. {
  45. mShowTracker = value;
  46. }
  47. }
  48. [Category("Media Player")]
  49. [Browsable(true)]
  50. [Description("Show or hide the position controls.")]
  51. public bool ShowPositionControls
  52. {
  53. get
  54. {
  55. return mShowPositionControls;
  56. }
  57. set
  58. {
  59. mShowPositionControls = value;
  60. }
  61. }
  62. [Category("Media Player")]
  63. [Browsable(true)]
  64. [Description("Show or hide the controls.")]
  65. public bool ShowControls
  66. {
  67. get
  68. {
  69. return mShowControls;
  70. }
  71. set
  72. {
  73. mShowControls = value;
  74. }
  75. }
  76. [Category("Media Player")]
  77. [Browsable(true)]
  78. [Description("Show or hide the status bar.")]
  79. public bool ShowStatusBar
  80. {
  81. get
  82. {
  83. return mShowStatusBar;
  84. }
  85. set
  86. {
  87. mShowStatusBar = value;
  88. }
  89. }
  90. #endregion
The last region of code contained in the custom control is that used to actually render the control:
  1. #region "Rendering"
  2. protected override void RenderContents(HtmlTextWriter writer)
  3. {
  4. try
  5. {
  6. StringBuilder sb = new StringBuilder();
  7. sb.Append("<object classid=clsid:22D6F312-B0F6-11D0-94AB-
  8. 0080C74C7E95 ");
  9. sb.Append("codebase=http://activex.microsoft.com/activex/
  10. controls/mplayer/en/nsmp2inf.cab#Version=
  11. 5,1,52,701 Width = " + Width.Value.ToString() + " Height = "
  12. + Height.Value.ToString() + "type=application/x-oleobject
  13. align=absmiddle");
  14. sb.Append("standby='Loading Microsoft+reg; Windows+reg; Media
  15. Player components...' id=mp1 /> ");
  16. sb.Append("<param name=FileName value=" + FilePath.ToString()
  17. + "> ");
  18. sb.Append("<param name=ShowStatusBar value=" +
  19. ShowStatusBar.ToString() + "> ");
  20. sb.Append("<param name=ShowPositionControls value=" +
  21. ShowPositionControls.ToString() + "> ");
  22. sb.Append("<param name=ShowTracker value=" +
  23. ShowTracker.ToString() + "> ");
  24. sb.Append("<param name=ShowControls value=" +
  25. ShowControls.ToString() + "> ");
  26. sb.Append("<embed src=" + FilePath.ToString() + " ");
  27. sb.Append("pluginspage=http://www.microsoft.com/
  28. Windows/MediaPlayer type=application/x-mplayer2 ");
  29. sb.Append("Width = " + Width.Value.ToString() + " ");
  30. sb.Append("Height = " + Height.Value.ToString());
  31. sb.Append(" /></embed></object>");
  32. writer.RenderBeginTag(HtmlTextWriterTag.Div);
  33. writer.Write(sb.ToString());
  34. writer.RenderEndTag();
  35. }
  36. catch
  37. {
  38. // with no properties set, this will render "Display PDF
  39. // Control" in a
  40. // a box on the page
  41. writer.RenderBeginTag(HtmlTextWriterTag.Div);
  42. writer.Write("Display WVC Control");
  43. writer.RenderEndTag();
  44. } // end try-catch
  45. } // end RenderContents
  46. #endregion
To render the control, the "RenderContents" method is overridden. Within a try-catch block, the contents of the control are defined using a string builder; once defined, the string builder is converted to a string and dropped within the beginning and ending div tags. Once the control is added to a page, the control will be contained within a div. As far as the string builder 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 to configure the media player.

In the catch portion of the try-catch block, if the control errors the words, "Display WVC Control" will appear on the page. This will happen if the file path property is not set (which it will not be when the control is dragged onto a form). In order to prevent the lack of a file name causing an error, the control is rendered differently (and without the media player control) 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 also added to the control's property grid (for example, one may set the border style, background color, etc. of the control because those properties are available to the div).

The Code: Test Web WVC

The 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 auto postback; the list contains a set of items with the value property pointing to a valid source of media. When the drop down list is used, the media player's file path is set to point to the new source of media. The second page contains four controls each set to a different source and with the control panel options enabled. The code is trivial and is not reported in this document.

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 to embed or even dynamically embed the controls into web pages. By moving the code required to display a media player into the custom control, it is no longer to code out the content into each page using the controls.