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

分享于 

14分钟阅读

Web开发

  繁體

介绍

本文介绍了一种快速而简单的创建用于在 ASP.NET 页面中显示多媒体文件的自定义网页控件的方法。 文章和演示项目专注于多媒体文件的介绍,基本思想是可以嵌入 ASP.NET 2.0页面的任何对象。

如果你只需要在网页上放置一个控件,就可以将该过程简化到页面中,这样就可以在不使用自定义控件的情况下显示多媒体文件,从而简化了进程。

控件的核心是Microsoft媒体播放器控件,因此,这个定制控件将处理媒体播放器控件自身可以处理的任何文件或者流媒体源。 示例演示了如何使用控件从网络摄像头显示流音频和视频,并显示可以通过URL访问的存储内容。

由于媒体播放器是ActiveX控件,因此建议浏览器将该控件标记为最终用户的安全风险。 这项计划包括了四个外部媒体源,分别是加利福尼亚湾水族馆 gleaned Aquarium水族馆 Aquarium Aquarium Aquarium Aquarium Aquarium Aquarium fun fun fun fun fun fun fun look。 当他们在一个团队前面进行和处理企鹅时,你可以听讲者谈论企鹅的( 它们来自南非)。 这种鸟鸟在自然环境中显示不同类型的海岸鸟,而且观察也很有趣。

另外两种控制是用来展示一些相当奇怪的电视广告,大众汽车,这些存储的视频,通过流行的你管网站( 看起来有相当多的奇怪和幽默的Fragment可以用来查看),这一点。 如果你没有宽带连接,你可以能希望考虑从演示页中删除除了一个控件之外的所有控件。

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

入门

开始时,打开 Visual Studio 2005 IDE并启动一个新项目。 从新项目对话框( 图 1 )的项目类型下,从"visual basic"下选择"Windows"节点,然后在右窗格中选择"web控件库"模板。 键用于项目的"mmp",然后单击"行"。 ( 注意:所有文件都包含在项目中,你可以选择使用这些文件来重新创建所有文件。)

打开项目后,右键单击解决方案并单击"添加"菜单选项,然后选择"新项"。 出现"添加新项"对话框时,选择模板;选择模板后,在 NAME 字段中选择 key" mediaplayer.vb",然后单击"添加"关闭对话框。 现在可以删除当项目最初从模板初始化时创建的默认网页控件。

这里时,我们应该拥有一个开放的web控件库项目,该项目中有一个名为" mediaplayer.vb"的。 在编写这个项目的代码之前,最后一个步骤是添加一个需要的引用。 要添加这里引用,双击解决方案资源管理器中的"我的项目"icon 以打开"我的项目";从这里选择"引用"选项卡,然后单击"添加"按钮。 当"添加引用"对话框打开时,选择. NET 选项卡,然后搜索列表,直到找到"系统。设计"引用。 选择这里库,然后单击"行"按钮。

图 2.Visual Studio 2005新项目对话框

图 3: 添加新项目对话框

导航回" mediaplayer.vb"文件,并在文件顶部确认项目 MATCH的导入:

Imports SystemImports System.Collections.GenericImports System.ComponentModelImports System.TextImports System.WebImports System.Web.UIImports System.Web.UI.WebControls
<ToolboxData("<{0}:MediaPlayer runat="server"></{0}:MediaPlayer>")> _PublicClass MediaPlayer
 Inherits WebControl

现在我们可以添加使这个控制功能成为功能所必需的代码。 首先要创建一些 private 成员变量;这些变量用于包含多媒体文件路径,并设置在运行时与媒体播放器一起显示的( 如果有的话) 控件。

要完成这里步骤,请在下面的变量声明中创建一个"声明"区域和密钥:

#Region"Declarations" 
 Private mFilePath AsStringPrivate mShowStatusBar AsBooleanPrivate mShowControls AsBooleanPrivate mShowPositionControls AsBooleanPrivate mShowTracker AsBoolean#End Region

声明变量之后,需要提供 public 属性以向控件用户公开控件属性;为了完成这里步骤,在下面的代码中创建一个"属性"区域和密钥:

#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))> _
 PublicProperty FilePath() AsStringGetReturn mFilePath
 EndGetSet(ByVal value AsString)
 mFilePath = value
 EndSetEndProperty <Category("Media Player")> _
 <Browsable(True)> _
 <Description("Show or hide the tracker.")> _
 PublicProperty ShowTracker() AsBooleanGetReturn mShowTracker
 EndGetSet(ByVal value AsBoolean)
 mShowTracker = value
 EndSetEndProperty <Category("Media Player")> _
 <Browsable(True)> _
 <Description("Show or hide the position controls.")> _
 PublicProperty ShowPositionControls() AsBooleanGetReturn mShowPositionControls
 EndGetSet(ByVal value AsBoolean)
 mShowPositionControls = value
 EndSetEndProperty <Category("Media Player")> _
 <Browsable(True)> _
 <Description("Show or hide the player controls.")> _
 PublicProperty ShowControls() AsBooleanGetReturn mShowControls
 EndGetSet(ByVal value AsBoolean)
 mShowControls = value
 EndSetEndProperty <Category("Media Player")> _
 <Browsable(True)> _
 <Description("Show or hide the status bar.")> _
 PublicProperty ShowStatusBar() AsBooleanGetReturn mShowStatusBar
 EndGetSet(ByVal value AsBoolean)
 mShowStatusBar = value
 EndSetEndProperty#End Region

注意,在 file path属性的属性部分,代码指定编辑器并进一步指定指定的编辑器为URL编辑器。 在控件中添加这里属性指定在控件的属性中编辑属性;在这里实例中,控件用户将在文本框的右侧显示带有省略号的控件的属性网格。 如果用户单击按钮,IDE将打开URL编辑器,允许用户使用该编辑器导航到多媒体文件,并通过该编辑器的对话框设置 FilePath 属性。 控件用户可以直接将文件路径或者URL直接粘贴到所提供的空间中,而不打开编辑器。 以这种方式设置的属性将保持在用户的控制项目中。

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

其余属性用于设置 布尔型 每个媒体播放器控制相关选项,如是否显示控件,或者显示跟踪栏,等等 没有关联。 布尔型 值,但用户将被限制为提供 True 或者 False 在属性编辑器中。

现在,惟一要做的就是定义控件的呈现方式。 要完成这里步骤,请创建"呈现"区域,并在这里区域中使用下面的代码( 注意,这里代码被清理以适合页面,在这里处使用的换行符不会在IDE中工作) 重写 RenderContents 子区域:

#Region"Rendering" 
 ProtectedOverridesSub RenderContents(ByVal writer As 
 System.Web.UI.HtmlTextWriter)
 TryDim sb AsNew 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()
 EndTryEndSub#End Region

在这个代码中,有一些值得注意的事情;首先,你可以看到如何使用这个方法来嵌入任何有效的对象。 字符串生成器从控件收集多个变量,FilePath 传递给对象源,控制和宽度的高度也被传递。 对象 标记,并将相关属性收集到对象的参数中,并将它的传递给。

已经定义的内容 对象 标记,剩下的细节是将控件放在呈现页上。 这是在字符串生成器的定义之后的三行完成的:

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

在这个例子中,HTML编写器被设置为放置一个 Div 标记;在 Div 在字符串生成器中定义的对象被写入渲染页面,在最后一行中, Div 已经关闭。

控件现在已经完成。 在测试控件之前,重新生成项目。 一旦完成并且任何遇到的错误都被修复,就是测试控件的时候了。 若要测试该控件,请向当前打开的( 或者使用IIS为包含的站点创建一个虚拟目录,并查看如果你愿意) 项目项目中添加一个新的网站项目。 创建测试网站后,通过在解决方案资源管理器中右击网站解决方案并选择"设置为启动项目"菜单选项,将测试项目设置为启动项目。 接下来,在网站解决方案中找到 Default.aspx 页面,右键单击该页面,然后选择"设置为起始页"菜单选项。

打开 Default.aspx 页进行编辑。 在工具箱( 它应该在最上面) 中找到新创建的控件,并将"mediaplayer"控件拖到页面( 图 4 ) 上。

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

现在可以单击 object 控件,并设置它的高度。宽度。控件和文件路径属性。 对于本演示,示例网页包含四个控件,每个控件都设置为媒体( 在 2006年11月30日 中有效)的有效路径。 查看ide编辑器的属性,你应该通过单击控件来看到任何给定控件的属性:

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

构建应用程序并运行它;你现在应该在页面上查看多媒体演示文稿。

摘要

本文演示创建自定义控件;示例提供了通过自定义控件嵌入 Windows 媒体播放器控件以简化在 ASP.NET 网页中显示多媒体内容所需的方法的方法。 示例代码和项目是使用 Visual Studio 2005中的ASP.NET 2.0生成的。


相关文章