一起談.NET技術，淺談ASP.NET4中構造HTML5視訊控制元件

狼人2007發表於2019-05-12
ASP.NETHTML控制元件

　　在本文中，將一步步地指導你如何使用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中，要展示一個視訊，可以用如下方式實現：




 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和音量等屬性，也有寬度和高度兩個屬性。下面是相關的屬性列表：


　　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為我們生成了初步的程式碼如下：









 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.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.  
10. namespace CustomControls  
11. {  
12.         [ToolboxData(“<{0}:VideoPlayer runat=server></{0}:VideoPlayer>“)]  
13.     public class VideoPlayer : WebControl  
14.     {  
15.  
16.     }  
17. } 





　　注意的是，預設的程式碼中，為控制元件生成了Text屬性，然而這裡並不需要，因此我們把




　　[DefaultProperty(“Text”)]




　　這行刪除掉。


　　步驟4 繼續為控制元件增加屬性


　　根據之前的介紹，我們開始為控制元件增加一些屬性，要增加的屬性如下：


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


　　PosterUrl: 這個是當沒有視訊時，顯示的替代圖片的地址。


　　AutoPlay:指示視訊是否自動裝載播放。


　　DisplayControlButtons: 指示是否顯示或者隱藏播放的相關按鈕。


　　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方法




　　服務端控制元件的主要目的就是向瀏覽器輸出內容。因此，作為開發者，我們就必須設定好我們的控制元件要向客戶端瀏覽器輸出什麼樣的內容。因此，我們可以重寫RenderContents方法即可，如下程式碼：







 1. protected override void RenderContents(HtmlTextWriter output)  
2. {  
3. } 





　　要注意的是，該方法有個引數是以HtmlTextWriter為物件的output,它可以設定向瀏覽器輸出HTML，它有很多方法和屬性，比如AddAttribute和RenderBeginTag。


　　接下來我們為控制元件增加向瀏覽器輸出的方法程式碼了，如下：









 1. protected override void RenderContents(HtmlTextWriter output)  
2. {  
3.     output.AddAttribute(HtmlTextWriterAttribute.Id, this.ID);  
4.     output.AddAttribute(HtmlTextWriterAttribute.Width, this.Width.ToString());  
5.     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標籤內容




　　緊接著，就可以輸出video標籤內的內容了，接著增加如下程式碼：









 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(); 





　　我們在輸出標籤的內容時，先使用了RenderBeginTag方法往瀏覽器端輸出一個標籤video,並使用RenderEndTag指示標籤內容已經輸出完畢。接下來在上面的程式碼中我們判斷指定的檔案格式的視訊檔案是否存在，如果存在的話，則按指定的檔案格式輸出。




　　最後，為了防止ASP.NET 控制元件在向瀏覽器輸出時，帶有span標籤，我們可以把它移走，只需要重寫render方法即可，如下：









 1. protected override void Render(HtmlTextWriter writer)  
2. {  
3.     this.RenderContents(writer);  
4. } 





　　步驟7 編譯生成控制元件




　　選擇Build 選單，生成整個解決方案，如下圖：




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


　　接下來要把我們做好的控制元件放到工具箱中去以方便今後使用。步驟如下：


　　1) 開啟工具箱檢視，滑鼠右鍵在空白的地方，在彈出的選單中點choose item,


　　2) 在彈出的選單中選擇.NET 元件卡，並選擇瀏覽，瀏覽我們剛做好的CustomerControll工程中的bindebug目錄下的CustomControls.DLL,最後點確定，如下圖所示：




　　這個時候，該控制元件就會在工具箱出現了，如下圖：




　　步驟8 把控制元件加到aspx頁面


　　我們可以隨便新建立一個aspx頁面，把控制元件從工具箱拖拉到頁面中就可以了，可以看到如下程式碼：


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




　　我們還可以在design設計檢視時，具體指定這個控制元件的每個屬性的值得了，看，是不是很簡單方便?




　　最後執行我們的程式，可以看到如下所示的播放器了：












相關文章