[ASP.NET 控件实作 Day10] Media Player 控件

[ASP.NET 控件实作 Day10] Media Player 控件

我们在前面几篇文章中，已经简要的对服务器控件做了基本介绍，接下来的几篇文章中我们要开始实作服务器控件。在网页上常使用 Media Player 来拨放影片，在 ASP.NET 中没有现成的控件来处理 Media Player，只能在 aspx 中加入 Media Player 相关的程序代码；本文将示范如何制作一个 Media Player 控件，让我们在 ASP.NET 中更方便的使用 Media Player。

程序代码下载：ASP.NET Server Control - Day10.rar

 

一、Media Player 原始 HTML 码

在制作 Media Player 控件之前，你需要先了解 Media Player 原本的 HTML 码，控件的作用就是想辨法把这些写在 aspx 中的 HTML 码交由控件来输出而已，以下为网页中加入 Media Player 的 HTML 码范例。

<OBJECT id="VIDEO" width="320" height="240" 

    style="position:absolute; left:0;top:0;"

    CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"

    type="application/x-oleobject">

    <PARAM NAME="URL" VALUE="your file or url">

    <PARAM NAME="SendPlayStateChangeEvents" VALUE="True">

    <PARAM NAME="AutoStart" VALUE="True">

    <PARAM name="uiMode" value="none">

    <PARAM name="PlayCount" value="9999">

</OBJECT>

 

 

 

在下面的网页有 Media Player 相关参数说明。

http://www.mioplanet.com/rsc/embed_mediaplayer.htm

 

二、实作 Media Player 控件

step1.首先新增由 WebControl 继承下来的 TBMediaPlayer 类别。

    Public Class TBMediaPlayer

        Inherits WebControl

    End Class

 

 

 

step2.覆写 TagKey 属性，传回 object 的 Tag。

        Protected Overrides ReadOnly Property TagKey() As System.Web.UI.HtmlTextWriterTag

            Get

                Return HtmlTextWriterTag.Object

            End Get

        End Property

 

 

step3.输出 HTML Tag 的 Attribute

在 object Tag 中包含 style、classid、type 二个 Attribute，WebControl 本身会处理 style，所以我们只需覆写 AddAttributesToRender 方法，处理 classid 及 type 二个 Attribute，记得覆写 AddAttributesToRender 方法时最后要加入 MyBase.AddAttributesToRender(writer)，才会执行父类别的 AddAttributesToRender 方法。

        ''' <summary>

        ''' 覆寫 AddAttributesToRender 方法。

        ''' </summary>

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

            '加入 MediaPlayer ActiveX 元件的 classid

            writer.AddAttribute("classid", "clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6")

            writer.AddAttribute("type", "application/x-oleobject")

            MyBase.AddAttributesToRender(writer)

        End Sub

 

 

 

step4.加入 Url 属性

加入指定播放档案来源的 Url 属性，其中套用 EditorAttribute 设定 UrlEditor，使用 Url 专用的编辑器来设定属性。

        ''' <summary>

        ''' 播放檔案來源。

        ''' </summary>

        < _

        Description("播放檔案來源"), _

        Bindable(True), _

        Category("Appearance"), _

        Editor(GetType(UrlEditor), GetType(UITypeEditor)), _

        UrlProperty(), _

        DefaultValue("") _

        > _

        Public Property Url() As String

            Get

                Return FUrl

            End Get

            Set(ByVal value As String)

                FUrl = value

            End Set

        End Property

 

 

 

step5.输出 Url 参数

接下来覆写 CreateChildControls 方法，输出 Url 参数。

        ''' <summary>

        ''' 加入參數。

        ''' </summary>

        ''' <param name="Name">參數名稱。</param>

        ''' <param name="Value">參數值。</param>

        Private Sub AddParam(ByVal Name As String, ByVal Value As String)

            Dim oParam As HtmlControls.HtmlGenericControl

            oParam = New HtmlControls.HtmlGenericControl("param")

            oParam.Attributes.Add("name", Name)

            oParam.Attributes.Add("value", Value)

            Me.Controls.Add(oParam)

        End Sub

        Protected Overrides Sub CreateChildControls()

            '加入 Url 參數

            AddParam("url", Me.ResolveClientUrl(Me.Url))

            MyBase.CreateChildControls()

        End Sub

 

 

 

step6.输出 Media Player 其它参数
你可以将 Media Player 的参数设定皆使用相对应的属性来设定，然后使用 step5 的方式来输出所有设定的参数值。

 

三、Media Player 控件程序代码

Media Player 控件的完整程序代码如下，此控件只加入 URL、AutoStart、UIMode 三个参数，你可以视需求情形将使用到的参数定义为属性来做设定即可。

    Public Class TBMediaPlayer

        Inherits WebControl

        ''' <summary>

        ''' 顯示界面模式。

        ''' </summary>

        Public Enum EUIMode

            NotSet

            Invisible

            None

            Mini

            Full

        End Enum

        Private FUrl As String = String.Empty

        Private FAutoStart As Boolean = False

        Private FUIMode As EUIMode = EUIMode.NotSet

        ''' <summary>

        ''' 播放檔案來源。

        ''' </summary>

        < _

        Description("播放檔案來源"), _

        Bindable(True), _

        Category("Appearance"), _

        Editor(GetType(UrlEditor), GetType(UITypeEditor)), _

        UrlProperty(), _

        DefaultValue("") _

        > _

        Public Property Url() As String

            Get

                Return FUrl

            End Get

            Set(ByVal value As String)

                FUrl = value

            End Set

        End Property

        ''' <summary>

        ''' 是否自動播放。

        ''' </summary>

        < _

        Description("是否自動播放。"), _

        DefaultValue(False) _

        > _

        Public Property AutoStart() As Boolean

            Get

                Return FAutoStart

            End Get

            Set(ByVal value As Boolean)

                FAutoStart = value

            End Set

        End Property

        ''' <summary>

        ''' 顯示界面模式。

        ''' </summary>

        < _

        Description("顯示界面模式。"), _

        DefaultValue(GetType(EUIMode), "NotSet") _

        > _

        Public Property UIMode() As EUIMode

            Get

                Return FUIMode

            End Get

            Set(ByVal value As EUIMode)

                FUIMode = value

            End Set

        End Property

        Protected Overrides ReadOnly Property TagKey() As System.Web.UI.HtmlTextWriterTag

            Get

                Return HtmlTextWriterTag.Object

            End Get

        End Property

        ''' <summary>

        ''' 覆寫 AddAttributesToRender 方法。

        ''' </summary>

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

            '加入 MediaPlayer ActiveX 元件的 classid

            writer.AddAttribute("classid", "clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6")

            writer.AddAttribute("type", "application/x-oleobject")

            MyBase.AddAttributesToRender(writer)

        End Sub

        ''' <summary>

        ''' 加入參數。

        ''' </summary>

        ''' <param name="Name">參數名稱。</param>

        ''' <param name="Value">參數值。</param>

        Private Sub AddParam(ByVal Name As String, ByVal Value As String)

            Dim oParam As HtmlControls.HtmlGenericControl

            oParam = New HtmlControls.HtmlGenericControl("param")

            oParam.Attributes.Add("name", Name)

            oParam.Attributes.Add("value", Value)

            Me.Controls.Add(oParam)

        End Sub

        Protected Overrides Sub CreateChildControls()

            '加入 Url 參數

            AddParam("URL", Me.ResolveClientUrl(Me.Url))

            '加入 autoStart 參數

            If Me.AutoStart Then

                AddParam("autoStart", "true")

            End If

            '加入 uiMode 參數

            If Me.UIMode <> EUIMode.NotSet Then

                AddParam("uiMode", Me.UIMode.ToString)

            End If

            MyBase.CreateChildControls()

        End Sub

    End Class

 

 

 

四、执行程序

把 TBMediaPlayer 控件拖曳至页面，设定好属性后，执行程序就可以在页面上看到呈现出来的 Media Player。

        <bee:TBMediaPlayer ID="TBMediaPlayer1" runat="server" Height="250px" 

            Width="250px" Url="~/test.wmv" />

 

 

 

备注：本文同步发布于「第一届iT邦帮忙铁人赛」，如果你觉得这篇文章对您有帮助，记得连上去推鉴此文增加人气 ^^
http://ithelp.ithome.com.tw/question/10012142