作业帮 > ASP.NET > 教育资讯

asp.net教程：ASP.NET 4如何打造HTML5视频控件

来源：学生作业帮助网 编辑：作业帮 时间：2024/05/14 10:26:49 ASP.NET
asp.net教程：ASP.NET 4如何打造HTML5视频控件
asp.net教程：ASP.NET 4如何打造HTML5视频控件ASP.NET
【51Test.NET-asp教程：ASP.NET 4如何打造HTML5视频控件】：

在本文中，将一步步地指导你如何使用Visual Studio 2010和ASP.NET 4的相关知识，打造一个基于HTML5标准规范的视频播放控件，其中你会学习到一些关于HTML 5的知识，还会学到如何使用ASP.NET 4去打造一个服务端的控件。

　　简介

　　ASP.NET 4中有大量由微软或第三方提供的控件，但要是这些控件不能满足你的需求，那该怎么办呢?答案是：自己动手去设计!

　　本教程会指导你如何去开发一个ASP.NET 的服务端控件，你会感受到在开发自己的服务端控件的同时，也提升了你开发的Web应用的质量。我们一般在开发自己的服务端控件的时候，会继承已有的一些服务端控件并添加一些自己的功能。当开发完服务端控件后，我们可以在不同的工程中共享这个控件。一般地，我们会把开发后经过编译的控件放在Web控件库，跟我们正常的工程分开。当我们要在某个项目中用到该控件时，只需要简单的把它拖拉到设计界面中去，就完成了，十分简单。

　　HTML5 Video概述

　　目前，HTML5已经慢慢开始流行了，在很多非IE的浏览器(IE 9中对 HTML5有相当好的支持)已经支持很多HTML5的特性了。现在，还没有很统一的播放视频的方式，大多数是靠FLASH或者其他播放器插件，因此在HTML5规范中，就定义了播放视频的标准，其中目前支持两种视频格式：Ogg文件(Ogg全称应该是OGGVobis(oggVorbis)是一种新的音频压缩格式，类似于MP3等的音乐格式。Ogg是完全免费、开放和没有专利限制的。OggVorbis文件的扩展名是.OGG。Ogg文件格式可以不断地进行大小和音质的改良，而不影响旧有的编码器或播放器)和

　　MPEG4文件格式。在HTML5中，要展示一个视频，可以用如下方式实现：

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
video>

　　这个控件有象Play,pause和音量等属性，也有宽度和高度两个属性。下面是相关的属性列表：

　　autoplay:该属性表明视频加载后是否自动播放还是需要有人工播放

　　controls: 指定该控件是否显示。

　　height:播放器的高度。

　　loop:指定设置该控件是否循环播放视频

　　preload: 指定控件是否在页面加载时就开始加载视频，如果不设置该属性，则默认是autoplay属性。

　　src: 播放视频文件的路径。

　　width: 播放器的宽度

　　poster: 当没有视频时，显示的图片。

下面我们就开始一步步设计该视频控件了

　　步骤1

　　首先我们使用的是Visual Studio 2010,当然你也可以使用免费的Visual Web Developer Express。

　　我们要设计的HTML5视频播放器只是一个简单的例子，在不同的支持HTML5的浏览器中可能外观稍微有点不同，比如在FireFox下，会是如下图的样子：


▲

　　步骤2  创建自定义组件工程

　　首先，我们必须创建一个新的类库工程去存放我们的自定义控件。当在单独分离的类库中创建了自定义控件后，我们可以将其编译为单独的DLL，这样在其他项目中需要的时候就可以用到了。

　　用Visual Studio 2010打开你已经建立好的asp web项目方案，在方案资源浏览器中，鼠标右击方案名，在弹出的菜单中选择新增项目。在接下来弹出的菜单中，选择工程类型为Web，并且选择ASP.NET Server Control，将工程命名为CustomerControl,点确定完成这个步骤，如下图：


▲

步骤3 开始设计自定义的Web控件

　　在资源管理器中，右键点CustomControls工程，选择“Add New Item”，再在弹出的菜单中选择Web的分类目录，然后在模版中选择ASP.NET Server Control选项，如下图：


▲

　　将控件命名为：VideoPlayer.cs，点确定，最后Visual Studio为我们生成了初步的代码如下：

　　using System;
　　using System.Collections.Generic;
　　using System.ComponentModel;
　　using System.Linq;
　　using System.Text;
　　using System.Web;
　　using System.Web.UI;
　　using System.Web.UI.WebControls;
　　namespace CustomControls
　　{
　　[DefaultProperty("Text")]
　　[ToolboxData("<{0}:VideoPlayer runat=server>")]
　　public class VideoPlayer : WebControl
　　{
　　[Bindable(true)]
　　[Category("Appearance")]
　　[DefaultValue("")]
　　[Localizable(true)]
　　public string Text
　　{
　　get
　　{
　　String s = (String)ViewState["Text"];
　　return ((s == null) ? "[" + this.ID + "]" : s);
　　}
　　set
　　{
　　ViewState["Text"] = value;
　　}
　　}
　　protected override void RenderContents(HtmlTextWriter output)
　　{
　　output.Write(Text);
　　}
　　}
　　}

　　我们要来修改上面的代码，修改后的代码如下：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CustomControls
{
        [ToolboxData("<{0}:VideoPlayer runat=server>")]
    public class VideoPlayer : WebControl
    {

    }
}

　　注意的是，默认的代码中，为控件生成了Text属性，然而这里并不需要，因此我们把

[DefaultProperty("Text")]

　　这行删除掉。

ASP.NET