65.9K
CodeProject 正在变化。 阅读更多。
Home

使用自定义控件添加多媒体内容

salysle
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.64/5 (9投票s)

2006年12月6日

8分钟阅读

viewsIcon

61655

downloadIcon

1614

本文介绍了一种快速简单的方法来创建一个自定义 Web 控件，用于在 ASP.NET 页面中显示多媒体文件。

引言

本文介绍了一种快速简单的方法来创建一个自定义 Web 控件，用于在 ASP.NET 页面中显示多媒体文件。虽然本文和演示项目侧重于多媒体文件的呈现，但基本思想适用于您可能希望嵌入到 ASP.NET 2.0 页面的任何类型的对象。

完全有可能在不使用自定义控件的情况下编写页面来显示多媒体文件，拥有一个方便的控件可以简化该过程，使用它的人只需将其拖放到页面上，并在 IDE（或运行时）中设置几个属性即可将多媒体内容添加到页面。

该控件的核心是 Microsoft Windows Media Player 控件，因此，此自定义控件将处理 Media Player 控件本身可以处理的任何文件或流媒体源。提供的示例演示了如何使用该控件显示网络摄像头的流式音频和视频，以及显示可通过 URL 访问的存储内容。

由于 Media Player 是一个 ActiveX 控件，请注意，浏览器可能会将该控件标记为对最终用户的安全风险。此项目中包含的演示网站包括四个外部多媒体数据源；两个来自加利福尼亚的蒙特雷湾水族馆，它提供了多个显示区域的网络摄像头馈送；在示例中，一个控件指向企鹅摄像头，另一个指向鸟舍摄像头；两者都很有趣且引人入胜。此外，当它们在观众面前喂食和照顾企鹅时，您可以听到演讲者谈论企鹅（它们来自南非）。鸟舍展示了不同类型的海滨鸟类在自然环境中的景象，观看它们也很有趣。

另外两个控件用于显示几个相当奇特的 VW 汽车电视广告；这些存储的视频通过流行的 YouTube 网站提供（该网站似乎有很多奇特且经常幽默的剪辑可供观看）。如果您没有宽带连接，您可能需要考虑从演示页面中删除除一个控件以外的所有控件。

图 1。四种控件同时使用的演示。

入门

要开始，请打开 Visual Studio 2005 IDE 并启动一个新项目。在“新建项目”对话框（图 1）中，在“项目类型”下，从“Visual Basic”下选择“Windows”节点，然后在右侧窗格中选择“Web 控件库”模板。输入“MMP”作为项目名称，然后单击“确定”。（注意：所有文件都包含在项目中，您可以选择使用这些文件，而不是从头开始重新创建所有内容。）

项目打开后，右键单击解决方案，然后单击“添加”菜单选项，然后选择“新建项”。当“添加新项”对话框出现时（图 2），选择“Web 自定义控件”模板；选择模板后，在名称字段中输入“MediaPlayer.vb”，然后单击“添加”关闭对话框。现在，您可以删除在项目最初从模板初始化时创建的默认 Web 控件。

此时，我们应该有一个已打开的 Web 控件库项目，其中包含一个名为“MediaPlayer.vb”的 Web 控件。在编写此项目的代码之前，还有最后一步是添加一个必需的引用。要添加此引用，请双击“解决方案资源管理器”中的“我的项目”图标以打开“我的项目”；在此，选择“引用”选项卡，然后单击“添加”按钮。当“添加引用”对话框打开时，选择 .NET 选项卡，然后在列表中向下搜索，直到找到“System.Design”引用。选择此库，然后单击“确定”按钮。

图 2。Visual Studio 2005 新建项目对话框

图 3：添加新项对话框

导航回“MediaPlayer.vb”文件，并在文件顶部，确认项目的导入与以下内容匹配

Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Text
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls


<ToolboxData("<{0}:MediaPlayer runat=server></{0}:MediaPlayer>")> _
Public Class MediaPlayer
    Inherits WebControl

现在我们可以添加使此控件正常工作的必要代码了。首先，我们需要创建一些私有成员变量；这些变量将用于存储多媒体文件的路径，并设置运行时将与媒体播放器一起显示的控件（如果有）。

要完成此步骤，请创建一个“声明”区域，并输入以下变量声明

#Region "Declarations"

    Private mFilePath As String
    Private mShowStatusBar As Boolean
    Private mShowControls As Boolean
    Private mShowPositionControls As Boolean
    Private mShowTracker As Boolean

#End Region

声明变量后，我们需要提供公共属性来将控件属性暴露给控件用户；要完成此步骤，请创建一个“属性”区域，并输入以下代码

#Region "Properties"

    <Category("Media Player")> _
    <Browsable(True)> _
    <Description("Set path to media player source file.")> _
    <Editor(GetType(System.Web.UI.Design.UrlEditor), 
    GetType(System.Drawing.Design.UITypeEditor))> _
    Public Property FilePath() As String
        Get
            Return mFilePath
        End Get
        Set(ByVal value As String)
            mFilePath = value
        End Set
    End Property


    <Category("Media Player")> _
    <Browsable(True)> _
    <Description("Show or hide the tracker.")> _
    Public Property ShowTracker() As Boolean
        Get
            Return mShowTracker
        End Get
        Set(ByVal value As Boolean)
            mShowTracker = value
        End Set
    End Property


    <Category("Media Player")> _
    <Browsable(True)> _
    <Description("Show or hide the position controls.")> _
    Public Property ShowPositionControls() As Boolean
        Get
            Return mShowPositionControls
        End Get
        Set(ByVal value As Boolean)
            mShowPositionControls = value
        End Set
    End Property


    <Category("Media Player")> _
    <Browsable(True)> _
    <Description("Show or hide the player controls.")> _
    Public Property ShowControls() As Boolean
        Get
            Return mShowControls
        End Get
        Set(ByVal value As Boolean)
            mShowControls = value
        End Set
    End Property


    <Category("Media Player")> _
    <Browsable(True)> _
    <Description("Show or hide the status bar.")> _
    Public Property ShowStatusBar() As Boolean
        Get
            Return mShowStatusBar
        End Get
        Set(ByVal value As Boolean)
            mShowStatusBar = value
        End Set
    End Property

#End Region

请注意，在文件路径属性的属性部分，代码指定了一个编辑器，并且指定的编辑器定义为 URL 编辑器。将此属性添加到控件会向 IDE 指定如何编辑该属性；在这种情况下，当控件用户为控件设置 FilePath 属性时，属性网格将在文本框的右侧显示一个带有省略号的按钮。如果用户单击该按钮，IDE 将打开 URL 编辑器，并允许用户使用该编辑器导航到多媒体文件，并通过该编辑器的对话框设置 FilePath 属性。控件用户可以直接在提供的空间中键入或粘贴文件路径或 URL，而无需打开编辑器。以这种方式设置的属性将在控件用户的项目中持久保存。

<Editor(GetType(System.Web.UI.Design.UrlEditor), _ 
     GetType(System.Drawing.Design.UITypeEditor))>_

其余属性用于设置每个媒体播放器控件相关选项的 Boolean 值，例如是否显示控件，或者显示进度条等。布尔值没有关联的编辑器，但用户将被限制在属性编辑器中提供 True 或 False。

此时，剩下的唯一一件事就是定义控件将如何呈现。要完成此步骤，请创建一个“渲染”区域，并在该区域内重写 RenderContents 子程序，使用以下代码（请注意，此代码已清理以适应页面，此处使用的换行符在 IDE 中将不起作用）

#Region "Rendering"

    Protected Overrides Sub RenderContents(ByVal writer As 
    System.Web.UI.HtmlTextWriter)

        Try

            Dim sb As New StringBuilder
            sb.Append("<object classid=clsid:" & _ 
                      "22D6F312-B0F6-11D0-94AB-0080C74C7E95 ")             
            sb.Append("codebase=http://activex.microsoft.com/activex/" & _
                      "controls/mplayer/en/nsmp2inf.cab#Version=5," & _ 
                      "1,52,701 Width = " & Width.Value.ToString() & _
                      " Height = " & Height.Value.ToString() & _
                      "type=application/x-oleobject align=absmiddle")
            sb.Append("standby='Loading Microsoft® Windows® " & _
                      "Media Player components...' id=mp1 /> ")
            sb.Append("<param name=FileName value=" & _
                      FilePath.ToString() & "> ")
            sb.Append("<param name=ShowStatusBar value=" & _
                      ShowStatusBar.ToString() & "> ")
            sb.Append("<param name=ShowPositionControls value=" & 
            ShowPositionControls.ToString() & "> ")
            sb.Append("<param name=ShowTracker value=" & 
            ShowTracker.ToString() & "> ")
            sb.Append("<param name=ShowControls value=" & 
            ShowControls.ToString() & "> ")
            sb.Append("<embed src=" & FilePath.ToString() & " ")
            sb.Append("pluginspage=http://www.microsoft.com/Windows/
            MediaPlayer type=application/x-mplayer2 ")
            sb.Append("Width = " & Width.Value.ToString() & " ")
            sb.Append("Height = " & Height.Value.ToString())
            sb.Append(" /></embed></object>")

            writer.RenderBeginTag(HtmlTextWriterTag.Div)
            writer.Write(sb.ToString())
            writer.RenderEndTag()

        Catch ex As Exception

            ' with no properties set, this will
            ' render "Custom MediaPlayer Control" in a
            ' a box on the page
            writer.RenderBeginTag(HtmlTextWriterTag.Div)
            writer.Write("Custom Media Player Control")
            writer.RenderEndTag()

        End Try

    End Sub

#End Region

在此代码中，有几点值得关注；首先，您可以看到嵌入的对象标签是如何创建的，并且无需太多想象就可以知道可以使用相同的方法嵌入任何有效的对象。字符串生成器收集了控件的几个变量，FilePath 被传递给对象的源，控件的高度和宽度也被收集并传递给 object 标签，控件相关的属性被收集并传递给对象的参数。

定义了 object 标签的内容后，唯一剩下的细节就是将控件放置在渲染的页面上。这在字符串生成器定义后的三行中完成

             writer.RenderBeginTag(HtmlTextWriterTag.Div)
             writer.Write(sb.ToString())
             writer.RenderEndTag()

在此示例中，HTML 编写器设置为放置一个开始的 Div 标签；在 Div 中，字符串生成器中定义的对象被写入渲染页面，最后一行 Div 被关闭。

控件现在已完成。在测试控件之前，请重新生成项目。完成后，修复任何遇到的错误后，就可以测试控件了。要测试控件，请向当前打开的 Web 控件库项目添加一个新的网站项目（或者如果您愿意，可以使用 IIS 创建一个虚拟目录来查看包含的站点）。创建测试网站后，通过右键单击“解决方案资源管理器”中的网站解决方案并选择“设置为启动项目”菜单选项，将测试项目设置为启动项目。接下来，在网站解决方案中找到 Default.aspx 页面，右键单击该页面，然后选择“设置为启动页”菜单选项。

打开 Default.aspx 页面进行编辑。在工具箱中找到新创建的控件（它应该在顶部），然后将“MediaPlayer”控件拖到页面上（图 4）。

图 4：工具箱中的自定义控件

现在您可以单击 object 控件并设置其高度、宽度、控件和文件路径属性。对于此演示，示例网页包含四个控件，每个控件都设置了有效的媒体路径（截至 2006 年 11 月 30 日有效）。查看 IDE 的属性编辑器，通过单击任何给定控件，您应该会看到该控件的所有属性

图 5：在 IDE 中设置媒体播放器控件的属性

生成应用程序并运行它；您现在应该在页面上看到多媒体演示。

摘要

本文演示了自定义控件的创建；提供的示例展示了一种通过自定义控件嵌入 Windows Media Player 控件的方法，以简化在 ASP.NET 网页上显示多媒体内容所需的工作量。示例代码和项目是使用 Visual Studio 2005 中的 ASP.NET 2.0 生成的。

© . All rights reserved.