浅谈ASP.NET 4中构造“.NET研究”HTML5视频控件
在本文中，將一步步地指導(dǎo)你如何使用Visual Studio 2010和ASP.NET 4的相關(guān)知識，打造一個基于HTML5標(biāo)準(zhǔn)規(guī)范的視頻播放控件，其中你會學(xué)習(xí)到一些關(guān)于HTML 5的知識，還會學(xué)到如何使用ASP.NET 4去打造一個服務(wù)端的控件。
簡介
ASP.NET 4中有大量由微軟或第三方提供的控件，但要是這些控件不能滿足你的需求，那該怎么辦呢?答案是：自己動手去設(shè)計!
本教程會指導(dǎo)你如何去開發(fā)一個ASP.NET 的服務(wù)端控件，你會感受到在開發(fā)自己的服務(wù)端控件的同時，也提升了你開發(fā)的Web應(yīng)用的質(zhì)量。我們一般在開發(fā)自己的服務(wù)端控件的時候，會繼承已有的一些服務(wù)端控件并添加一些自己的功能。當(dāng)開發(fā)完服務(wù)端控件后，我們可以在不同的工程中共享這個控件。一般地，我們會把開發(fā)后經(jīng)過編譯的控件放在Web控件庫，跟我們正常的工程分開。當(dāng)我們要在某個項目中用到該控件時，只需要簡單的把它拖拉到設(shè)計界面中去，就完成了，十分簡單。
HTML5 Video概述
目前，HTML5已經(jīng)慢慢開始流行了，在很多非IE的瀏覽器(IE 9中對 HTML5有相當(dāng)好的支持)已經(jīng)支持很多HTML5的特性了。現(xiàn)在，還沒有很統(tǒng)一的播放視頻的方式，大多數(shù)是靠FLASH或者其他播放器插件，因此在HTML5規(guī)范中，就定義了播放視頻的標(biāo)準(zhǔn)，其中目前支持兩種視頻格式：Ogg文件(Ogg全稱應(yīng)該是OGGVobis(oggVorbis)是一種新的音頻壓縮格式，類似于MP3等的音樂格式。
Ogg是完全免費、開放和沒有專利限制的。OggVorbis文件的擴(kuò)展名是.OGG。Ogg文件格式可以不斷地進(jìn)行大小和音質(zhì)的改良，而不影響舊有的編碼器或播放器)和
MPEG4文件格式。在HTML5中，要展示一個視頻，可以用如下方式實現(xiàn)：
1. <video width="320" height="240" controls="controls">2. <source src="movie.ogg" type="video/ogg" />
3. <source src="movie.mp4" type="video/mp4" />
4. </video>
這個控件有象Play,pause和音量等屬性，也有寬度和高度兩個屬性。下面是相關(guān)的屬性列表：
autoplay:該屬性表明視頻加載后是否自動播放還是需要有人工播放
controls: 指定該控件是否顯示。
height:播放器的高度。
loop:指定設(shè)置該控件是否循環(huán)播放視頻
preload: 指定控件是否在頁面加載時就開始加載視頻，如果不設(shè)置該屬性，則默認(rèn)是autoplay屬性。
src: 播放視頻文件的路徑。
width: 播放器的寬度
poster: 當(dāng)沒有視頻時，顯示的圖片。
下面我們就開始一步步設(shè)計該視頻控件了
步驟1
首先我們使用的是Visual Studio 2010,當(dāng)然你也可以使用免費的Visual Web Developer Express。
我們要設(shè)計的HTML5視頻播放器只是一個簡單的例子，在不同的支持HTML5的瀏覽器中可能外觀稍微有點不同，比如在FireFox下，會是如下圖的樣子：
步驟2 ?創(chuàng)建自定義組件工程
首先，我們必須創(chuàng)建一個新的類庫工程去存放我們的自定義控件。當(dāng)在單獨分離的類庫中創(chuàng)建了自定義控件后，我們可以將其編譯為單獨的DLL，這樣在其他項目中需要的時候就可以用到了。
用Visual Studio 2010打開你已經(jīng)建立好的asp.net web項目方案，在方案資源瀏覽器中，鼠標(biāo)右擊方案名，在彈出的菜單中選擇新增項目。在接下來彈出的菜單中，選擇工程類型為Web，并且選擇ASP.NET Server Control，將工程命名為CustomerControl,點確定完成這個步驟，如下圖：
步驟3 開始設(shè)計自定義的Web控件
在資源管理器中，右鍵點CustomControls工程，選擇“Add New Item”，再在彈出的菜單中選擇Web的分類目錄，然后在模版中選擇ASP.NET Server Control選項，如下圖：
將控件命名為：VideoPlayer.cs，點確定，最后Visual Studio為我們生成了初步的代碼如下：
1. using System;2. using System.Collections.Generic;
3. using System.ComponentModel;
4. using System.Linq;
5. using System.Text;
6. using System.Web;
7. using System.Web.UI;
8. using System.Web.UI.WebControls;
9. namespace CustomControls
10. {
11. [DefaultProperty("Text")]
12. [ToolboxData("<{0}:VideoPlayer runat=server>")]
13. public class VideoPlayer : WebControl
14. {
15. [Bindable(true)]
16. [Category("Appearance")]
17. [DefaultValue("")]
18. [Localizable(true)]
19. public string Text
20. {
21. get
22. {
23. String s = (String)ViewState["Text"];
24. return ((s == null) ? "[" + this.ID + "]" : s);
25. }
26. set
27. {
28. ViewState["Text"] = value;
29. }
30. }
31. protected override void RenderContents(HtmlTextWriter output)
32. {
33. output.Write(Text);
34. }
35. }
36. }
我們要來修改上面的代碼，修改后的代碼如下：
1. using System;2. using System.Collections.Generic;
3. using System.ComponentMode上海徐匯企業(yè)網(wǎng)站設(shè)計與制作l;
4. using System.Linq;
5. using System.Text;
6. using System.Web;
7. using System.Web.UI;
8. using System.Web.UI.Web上海企業(yè)網(wǎng)站設(shè)計與制作Controls;
9.
10. namespace CustomControls
11. {
12. [ToolboxData("<{0}:VideoPlayer runat=server></{0}:VideoPlayer>")]
13. public class VideoPlayer : WebControl
14. {
15.
16. }
17. }
注意的是，默認(rèn)的代碼中，為控件生成了Text屬性，然而這里并不需要，因此我們把
[DefaultProperty("Text")]這行刪除掉。
步驟4 繼續(xù)為控件增加屬性
根據(jù)之前的介紹，我們開始為控件增加一些屬性，要增加的屬性如下：
VideoUrl:指定視頻播放的地址。
PosterUrl: 這個是當(dāng)沒有視頻時，顯示的替代圖片的地址。
AutoPlay:指示視頻是否自動裝載播放。
DisplayControlButtons: 指示是否顯示或者隱藏播放的相關(guān)按鈕。
Loop: 指示視頻是否自動播放。
增加屬性后的代碼如下：
1. using System;2. using System.Collections.Generic;
3. using System.ComponentModel;
4. using System.Linq;
5. using System.Text;
6. using System.Web;
7. using System.Web.UI;
8. using System.Web.UI.WebControls;
9. namespace CustomControls
10. {
11. [ToolboxData("<{0}:VideoPlayer runat=server></{0}:VideoPlayer>")]
12. public class VideoPlayer : WebControl
13. {
14. private string _Mp4Url;
15. public string Mp4Url
16. {
17. get { return _Mp4Url; }
18. set { _Mp4Url = value; }
19. }
20.
21. private string _OggUrl = null;
22. public string OggUrl
23. {
24. get { return _OggUrl; }
25. set { _OggUrl = value; }
26. }
27.
28. private string _Poster = null;
29. public string PosterUrl
30. {
31. get { return _Poster; }
32. set { _Poster = value; }
33. }
34.
35. private bool _AutoPlay = false;
36. public bool AutoPlay
37. {
38. get { return _AutoPlay; }
39. set { _AutoPlay = value; }
40. }
41.
42. private bool _Controls = true;
43. public bool DisplayControlButtons
44. {
45. get{ return _Controls; }
46. set { _Controls = value; }
47. }
48.
49. private bool _Loop = false;
50. public bool Loop
51. {
52. get { return _Loop; }
53. set { _Loop = value; }
54. }
55. }
56. }
步驟5 修改RenderContents方法
服務(wù)端控件的主要目的就是向瀏覽器輸出內(nèi)容。因此，作為開發(fā)者，我們就必須設(shè)定好我們的控件要向客戶端瀏覽器輸出什么樣的內(nèi)容。因此，我們可以重寫RenderContents方法即可，如下代碼：
1. protected override void RenderContents(HtmlTextWriter output)2. {
3. }
要注意的是，該方法有個參數(shù)是以HtmlTextWriter為對象的output,它可以設(shè)置向瀏覽器輸出HTML，它有很多方法和屬性，比如AddAttribute和RenderBeginTag。
接下來我們?yōu)榭丶黾酉驗g覽器輸出的方法代碼了，如下：
1. protected override void RenderContents(HtmlTextWriter output)2. {
3. output.AddAttribute(HtmlTextWriterAttribute.Id, this.ID);
4. output.AddAttribute(HtmlTextWriterAttribute.Width, this.Width.ToString());
5上海企業(yè)網(wǎng)站制作an>. output.AddAttribute(HtmlTextWriterAttribute.Height, this.Height.ToString());
6.
7. if (DisplayControlButtons == true)
8. {
9. output.AddAttribute("controls", "controls");
10. }
11.
12. if (PosterUrl != null)
13. {
14. output.AddAttribute("poster", PosterUrl);
15. }
16.
17. if (AutoPlay == true)
18. {
19. output.AddAttribute("autoplay", "autoplay");
20. }
21.
22. if (Loop == true)
23. {
24. output.AddAttribute("loop", "loop");
25. }
26. }
步驟6 輸出VIDEO標(biāo)簽內(nèi)容
緊接著，就可以輸出video標(biāo)簽內(nèi)的內(nèi)容了，接著增加如下代碼：
1. output.RenderBeginTag("video");2. if (OggUrl != null)
3. {
4. output.AddAttribute("src", OggUrl);
5. output.AddAttribute("type", "video/ogg");
6. output.RenderBeginTag("source");
7. output.RenderEndTag();
8. }
9.
10. if (Mp4Url != null)
11. {
12. output.AddAttribute("src", Mp4Url);
13. output.AddAttribute("type", "video/mp4");
14. output.RenderBeginTag("source");
15. output.RenderEndTag();
16. }
17. output.RenderEndTag();
我們在輸出標(biāo)簽的內(nèi)容時，先使用了RenderBeginTag方法往瀏覽器端輸出一個標(biāo)簽video,并使用RenderEndTag指示標(biāo)簽內(nèi)容已經(jīng)輸出完畢。接下來在上面的代碼中我們判斷指定的文件格式的視頻文件是否存在，如果存在的話，則按指定的文件格式輸出。
最后，為了防止ASP.NET 控件在向瀏覽器輸出時，帶有span標(biāo)簽，我們可以把它移走，只需要重寫render方法即可，如下：
1. protected override void Render(HtmlTextWriter writer)2. {
3. this.RenderContents(writer);
4. }
步驟7 編譯生成控件
選擇Build 菜單，生成整個解決方案，如下圖：
步驟8 將控件放到工具箱去
接下來要把我們做好的控件放到工具箱中去以方便今后使用。步驟如下：
1) 打開工具箱視圖，鼠標(biāo)右鍵在空白的地方，在彈出的菜單中點choose item,
2) 在彈出的菜單中選擇.NET 組件卡，并選擇瀏覽，瀏覽我們剛做好的CustomerControll工程中的bin\debug目錄下的CustomControls.DLL,最后點確定，如下圖所示：
這個時候，該控件就會在工具箱出現(xiàn)了，如下圖：
步驟8 把控件加到aspx頁面
我們可以隨便新建立一個aspx頁面，把控件從工具箱拖拉到頁面中就可以了，可以看到如下代碼：
<cc1:VideoPlayer ID="VideoPlayer1" runat="server" Mp4Url="videos/movie.mp4" OggUrl="videos/movie.ogg" Width="400" Height="300" />
我們還可以在design設(shè)計視圖時，具體指定這個控件的每個屬性的值得了，看，是不是很簡單方便?最后運行我們的程序，可以看到如下所示的播放器了：
轉(zhuǎn)載于:https://www.cnblogs.com/waw/archive/2011/10/19/2218114.html
總結(jié)
以上是生活随笔為你收集整理的浅谈ASP.NET 4中构造“.NET研究”HTML5视频控件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 管理php-fpm
- 下一篇： WPF设置Button背景