我们在前面几篇文章中,已经简要的对服务器控件做了基本介绍,接下来的几篇文章中我们要开始实作服务器控件。在网页上常使用 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