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

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

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),太仆寺企業(yè)網(wǎng)站建設(shè),太仆寺品牌網(wǎng)站建設(shè),網(wǎng)站定制,太仆寺網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,太仆寺網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

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

HTML5 Video概述

目前，HTML5已經(jīng)慢慢開始流行了，在很多非IE的瀏覽器(IE 9中對(duì) 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是完全免費(fè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: 指定控件是否在頁面加載時(shí)就開始加載視頻，如果不設(shè)置該屬性，則默認(rèn)是autoplay屬性。

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

width: 播放器的寬度

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

下面我們就開始一步步設(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è)新的類庫工程去存放我們的自定義控件。當(dāng)在單獨(dú)分離的類庫中創(chuàng)建了自定義控件后，我們可以將其編譯為單獨(dú)的DLL，這樣在其他項(xiàng)目中需要的時(shí)候就可以用到了。

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

步驟3 開始設(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);  }  }  }

我們要來修改上面的代碼，修改后的代碼如下：

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ù)之前的介紹，我們開始為控件增加一些屬性，要增加的屬性如下：

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

PosterUrl: 這個(gè)是當(dāng)沒有視頻時(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)容。因此，作為開發(fā)者，我們就必須設(shè)定好我們的控件要向客戶端瀏覽器輸出什么樣的內(nèi)容。因此，我們可以重寫RenderContents方法即可，如下代碼：

protected override void RenderContents(HtmlTextWriter output)  {  }

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

接下來我們?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)輸出完畢。接下來在上面的代碼中我們判斷指定的文件格式的視頻文件是否存在，如果存在的話，則按指定的文件格式輸出。

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

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

步驟7 編譯生成控件

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

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

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

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

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

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

步驟8 把控件加到aspx頁面

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

<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ì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：如何理解ASP.NET4中構(gòu)造HTML5視頻控件
本文URL：http://bm7419.com/article28/jdscjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)公司、定制網(wǎng)站、網(wǎng)站維護(hù)、、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)