如何理解ASP.NET 4中構(gòu)造HTML5視頻控件

本篇文章給大家分享的是有關(guān)如何理解ASP.NET 4中構(gòu)造HTML5視頻控件，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

如何使用Visual Studio 2010和ASP.NET 4的相關(guān)知識(shí)，打造一個(gè)基于HTML5標(biāo)準(zhǔn)規(guī)范的視頻播放控件，其中你會(huì)學(xué)習(xí)到一些關(guān)于HTML 5的知識(shí)，還會(huì)學(xué)到如何使用ASP.NET 4去打造一個(gè)服務(wù)端的控件。

簡(jiǎn)介

ASP.NET 4中有大量由微軟或第三方提供的控件，但要是這些控件不能滿足你的需求，那該怎么辦呢?答案是：自己動(dòng)手去設(shè)計(jì)!

本教程會(huì)指導(dǎo)你如何去開(kāi)發(fā)一個(gè)ASP.NET 的服務(wù)端控件，你會(huì)感受到在開(kāi)發(fā)自己的服務(wù)端控件的同時(shí)，也提升了你開(kāi)發(fā)的Web應(yīng)用的質(zhì)量。我們一般在開(kāi)發(fā)自己的服務(wù)端控件的時(shí)候，會(huì)繼承已有的一些服務(wù)端控件并添加一些自己的功能。當(dāng)開(kāi)發(fā)完服務(wù)端控件后，我們可以在不同的工程中共享這個(gè)控件。一般地，我們會(huì)把開(kāi)發(fā)后經(jīng)過(guò)編譯的控件放在Web控件庫(kù)，跟我們正常的工程分開(kāi)。當(dāng)我們要在某個(gè)項(xiàng)目中用到該控件時(shí)，只需要簡(jiǎn)單的把它拖拉到設(shè)計(jì)界面中去，就完成了，十分簡(jiǎn)單。

HTML5 Video概述

目前，HTML5已經(jīng)慢慢開(kāi)始流行了，在很多非IE的瀏覽器(IE 9中對(duì) HTML5有相當(dāng)好的支持)已經(jīng)支持很多HTML5的特性了。現(xiàn)在，還沒(méi)有很統(tǒng)一的播放視頻的方式，大多數(shù)是靠FLASH或者其他播放器插件，因此在HTML5規(guī)范中，就定義了播放視頻的標(biāo)準(zhǔn)，其中目前支持兩種視頻格式：Ogg文件(Ogg全稱應(yīng)該是OGGVobis(oggVorbis)是一種新的音頻壓縮格式，類似于MP3等的音樂(lè)格式。Ogg是完全免費(fèi)、開(kāi)放和沒(méi)有專利限制的。OggVorbis文件的擴(kuò)展名是.OGG。Ogg文件格式可以不斷地進(jìn)行大小和音質(zhì)的改良，而不影響舊有的編碼器或播放器)和

MPEG4文件格式。在HTML5中，要展示一個(gè)視頻，可以用如下方式實(shí)現(xiàn)：

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

這個(gè)控件有象Play,pause和音量等屬性，也有寬度和高度兩個(gè)屬性。下面是相關(guān)的屬性列表：

autoplay:該屬性表明視頻加載后是否自動(dòng)播放還是需要有人工播放

controls: 指定該控件是否顯示。

height:播放器的高度。

loop:指定設(shè)置該控件是否循環(huán)播放視頻

preload: 指定控件是否在頁(yè)面加載時(shí)就開(kāi)始加載視頻，如果不設(shè)置該屬性，則默認(rèn)是autoplay屬性。

src: 播放視頻文件的路徑。

width: 播放器的寬度

poster: 當(dāng)沒(méi)有視頻時(shí)，顯示的圖片。

下面我們就開(kāi)始一步步設(shè)計(jì)該視頻控件了

步驟1

首先我們使用的是Visual Studio 2010,當(dāng)然你也可以使用免費(fèi)的Visual Web Developer Express。

我們要設(shè)計(jì)的HTML5視頻播放器只是一個(gè)簡(jiǎn)單的例子，在不同的支持HTML5的瀏覽器中可能外觀稍微有點(diǎn)不同，比如在FireFox下，會(huì)是如下圖的樣子：

▲

步驟2  創(chuàng)建自定義組件工程

首先，我們必須創(chuàng)建一個(gè)新的類庫(kù)工程去存放我們的自定義控件。當(dāng)在單獨(dú)分離的類庫(kù)中創(chuàng)建了自定義控件后，我們可以將其編譯為單獨(dú)的DLL，這樣在其他項(xiàng)目中需要的時(shí)候就可以用到了。

用Visual Studio 2010打開(kāi)你已經(jīng)建立好的asp.net web項(xiàng)目方案，在方案資源瀏覽器中，鼠標(biāo)右擊方案名，在彈出的菜單中選擇新增項(xiàng)目。在接下來(lái)彈出的菜單中，選擇工程類型為Web，并且選擇ASP.NET Server Control，將工程命名為CustomerControl,點(diǎn)確定完成這個(gè)步驟，如下圖：

步驟3 開(kāi)始設(shè)計(jì)自定義的Web控件

在資源管理器中，右鍵點(diǎn)CustomControls工程，選擇“Add New Item”，再在彈出的菜單中選擇Web的分類目錄，然后在模版中選擇ASP.NET Server Control選項(xiàng)，如下圖：

將控件命名為：VideoPlayer.cs，點(diǎn)確定，***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);  }  }  }

我們要來(lái)修改上面的代碼，修改后的代碼如下：

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></{0}:VideoPlayer>")]      public class VideoPlayer : WebControl      {       }  }

注意的是，默認(rèn)的代碼中，為控件生成了Text屬性，然而這里并不需要，因此我們把

[DefaultProperty("Text")]

這行刪除掉。

步驟4 繼續(xù)為控件增加屬性

根據(jù)之前的介紹，我們開(kāi)始為控件增加一些屬性，要增加的屬性如下：

VideoUrl:指定視頻播放的地址。

PosterUrl: 這個(gè)是當(dāng)沒(méi)有視頻時(shí)，顯示的替代圖片的地址。

AutoPlay:指示視頻是否自動(dòng)裝載播放。

DisplayControlButtons: 指示是否顯示或者隱藏播放的相關(guān)按鈕。

Loop: 指示視頻是否自動(dòng)播放。

增加屬性后的代碼如下：

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></{0}:VideoPlayer>")]      public class VideoPlayer : WebControl      {          private string _Mp4Url;          public string Mp4Url          {              get { return _Mp4Url; }              set { _Mp4Url = value; }          }           private string _OggUrl = null;          public string OggUrl          {              get { return _OggUrl; }              set { _OggUrl = value; }          }           private string _Poster = null;          public string PosterUrl          {              get { return _Poster; }              set { _Poster = value; }          }           private bool _AutoPlay = false;          public bool AutoPlay          {              get { return _AutoPlay; }              set { _AutoPlay = value; }          }           private bool _Controls = true;          public bool DisplayControlButtons          {              get { return _Controls; }              set { _Controls = value; }          }           private bool _Loop = false;          public bool Loop          {              get { return _Loop; }              set { _Loop = value; }          }      }  }

步驟5 修改RenderContents方法

服務(wù)端控件的主要目的就是向?yàn)g覽器輸出內(nèi)容。因此，作為開(kāi)發(fā)者，我們就必須設(shè)定好我們的控件要向客戶端瀏覽器輸出什么樣的內(nèi)容。因此，我們可以重寫RenderContents方法即可，如下代碼：

protected override void RenderContents(HtmlTextWriter output)  {  }

要注意的是，該方法有個(gè)參數(shù)是以HtmlTextWriter為對(duì)象的output,它可以設(shè)置向?yàn)g覽器輸出HTML，它有很多方法和屬性，比如AddAttribute和RenderBeginTag。

接下來(lái)我們?yōu)榭丶黾酉驗(yàn)g覽器輸出的方法代碼了，如下：

protected override void RenderContents(HtmlTextWriter output)  {      output.AddAttribute(HtmlTextWriterAttribute.Id, this.ID);      output.AddAttribute(HtmlTextWriterAttribute.Width, this.Width.ToString());      output.AddAttribute(HtmlTextWriterAttribute.Height, this.Height.ToString());       if (DisplayControlButtons == true)      {          output.AddAttribute("controls", "controls");      }       if (PosterUrl != null)      {          output.AddAttribute("poster", PosterUrl);      }       if (AutoPlay == true)      {          output.AddAttribute("autoplay", "autoplay");      }       if (Loop == true)      {          output.AddAttribute("loop", "loop");      }  }

步驟6 輸出VIDEO標(biāo)簽內(nèi)容

緊接著，就可以輸出video標(biāo)簽內(nèi)的內(nèi)容了，接著增加如下代碼：

output.RenderBeginTag("video");  if (OggUrl != null)  {      output.AddAttribute("src", OggUrl);      output.AddAttribute("type", "video/ogg");      output.RenderBeginTag("source");      output.RenderEndTag();  }   if (Mp4Url != null)  {      output.AddAttribute("src", Mp4Url);      output.AddAttribute("type", "video/mp4");      output.RenderBeginTag("source");      output.RenderEndTag();  }  output.RenderEndTag();

我們?cè)谳敵鰳?biāo)簽的內(nèi)容時(shí)，先使用了RenderBeginTag方法往瀏覽器端輸出一個(gè)標(biāo)簽video,并使用RenderEndTag指示標(biāo)簽內(nèi)容已經(jīng)輸出完畢。接下來(lái)在上面的代碼中我們判斷指定的文件格式的視頻文件是否存在，如果存在的話，則按指定的文件格式輸出。

***，為了防止ASP.NET 控件在向?yàn)g覽器輸出時(shí)，帶有span標(biāo)簽，我們可以把它移走，只需要重寫render方法即可，如下：

protected override void Render(HtmlTextWriter writer)  {      this.RenderContents(writer);  }

步驟7 編譯生成控件

選擇Build 菜單，生成整個(gè)解決方案，如下圖：

步驟8 將控件放到工具箱去

接下來(lái)要把我們做好的控件放到工具箱中去以方便今后使用。步驟如下：

1) 打開(kāi)工具箱視圖，鼠標(biāo)右鍵在空白的地方，在彈出的菜單中點(diǎn)choose item,

2) 在彈出的菜單中選擇.NET 組件卡，并選擇瀏覽，瀏覽我們剛做好的CustomerControll工程中的bin\debug目錄下的CustomControls.DLL,***點(diǎn)確定，如下圖所示：

這個(gè)時(shí)候，該控件就會(huì)在工具箱出現(xiàn)了，如下圖：

步驟8 把控件加到aspx頁(yè)面

我們可以隨便新建立一個(gè)aspx頁(yè)面，把控件從工具箱拖拉到頁(yè)面中就可以了，可以看到如下代碼：

<cc1:VideoPlayer ID="VideoPlayer1" runat="server" Mp4Url="videos/movie.mp4" OggUrl="videos/movie.ogg" Width="400" Height="300" />

我們還可以在design設(shè)計(jì)視圖時(shí)，具體指定這個(gè)控件的每個(gè)屬性的值得了，看，是不是很簡(jiǎn)單方便?

***運(yùn)行我們的程序，可以看到如下所示的播放器了：

以上就是如何理解ASP.NET 4中構(gòu)造HTML5視頻控件，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。