淺談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.net 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></{0}:VideoPlayer>")]
- public class VideoPlayer : WebControl
- {
- }
- }
注意的是，默認的代碼中，為控件生成了Text屬性，然而這里并不需要，因此我們把
這行刪除掉。
步驟4 繼續為控件增加屬性
根據之前的介紹，我們開始為控件增加一些屬性，要增加的屬性如下：
VideoUrl:指定視頻播放的地址。
PosterUrl: 這個是當沒有視頻時，顯示的替代圖片的地址。
AutoPlay:指示視頻是否自動裝載播放。
DisplayControlButtons: 指示是否顯示或者隱藏播放的相關按鈕。
Loop: 指示視頻是否自動播放。
增加屬性后的代碼如下：
- 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方法
服務端控件的主要目的就是向瀏覽器輸出內容。因此，作為開發者，我們就必須設定好我們的控件要向客戶端瀏覽器輸出什么樣的內容。因此，我們可以重寫RenderContents方法即可，如下代碼：
- protected override void RenderContents(HtmlTextWriter output)
- {
- }
要注意的是，該方法有個參數是以HtmlTextWriter為對象的output,它可以設置向瀏覽器輸出HTML，它有很多方法和屬性，比如AddAttribute和RenderBeginTag。
接下來我們為控件增加向瀏覽器輸出的方法代碼了，如下：
- 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標簽內容
緊接著，就可以輸出video標簽內的內容了，接著增加如下代碼：
- 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();
我們在輸出標簽的內容時，先使用了RenderBeginTag方法往瀏覽器端輸出一個標簽video,并使用RenderEndTag指示標簽內容已經輸出完畢。接下來在上面的代碼中我們判斷指定的文件格式的視頻文件是否存在，如果存在的話，則按指定的文件格式輸出。
***，為了防止ASP.NET 控件在向瀏覽器輸出時，帶有span標簽，我們可以把它移走，只需要重寫render方法即可，如下：
- protected override void Render(HtmlTextWriter writer)
- {
- this.RenderContents(writer);
- }
步驟7 編譯生成控件
選擇Build 菜單，生成整個解決方案，如下圖：
步驟8 將控件放到工具箱去
接下來要把我們做好的控件放到工具箱中去以方便今后使用。步驟如下：
1) 打開工具箱視圖，鼠標右鍵在空白的地方，在彈出的菜單中點choose item,
2) 在彈出的菜單中選擇.NET 組件卡，并選擇瀏覽，瀏覽我們剛做好的CustomerControll工程中的bin\debug目錄下的CustomControls.DLL,***點確定，如下圖所示：
這個時候，該控件就會在工具箱出現了，如下圖：
步驟8 把控件加到aspx頁面
我們可以隨便新建立一個aspx頁面，把控件從工具箱拖拉到頁面中就可以了，可以看到如下代碼：
<cc1:VideoPlayer ID="VideoPlayer1" runat="server" Mp4Url="videos/movie.mp4" OggUrl="videos/movie.ogg" Width="400" Height="300" />
***運行我們的程序，可以看到如下所示的播放器了：
【編輯推薦】
- 淺談在openSUSE下ASP.NET 4開發環境配置
- 淺談ASP.NET 4.0 SEO增強中的UrlRouting
- ASP.NET 4中的SEO改進
- 使用ASP.NET 4的自動啟動特性
- ASP.NET 4.0新特性ClientID的改進
