Shulou(Shulou.com)06/03 Report--

This article is to share with you about how to understand the construction of HTML5 video controls in ASP.NET 4. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article.

How to use the relevant knowledge of Visual Studio 2010 and ASP.NET 4 to create a video playback control based on HTML5 standards, in which you will learn some knowledge about HTML5 and how to use ASP.NET 4 to create a server control.

Brief introduction

ASP.NET 4 has a large number of controls provided by Microsoft or third parties, but what if these controls don't meet your needs? The answer is: design it yourself!

This tutorial will teach you how to develop an ASP.NET server control, you will feel that the development of your own server control, but also improve the quality of your Web application. Generally speaking, when we develop our own server-side controls, we will inherit some existing server-side controls and add some of our own functions. When the server control is developed, we can share the control in different projects. Generally speaking, we will put the compiled controls in the Web control library, which is separate from our normal project. When we want to use the control in a project, we simply drag it to the design interface, and it's very simple.

Overview of HTML5 Video

At present, HTML5 has gradually become popular, and many non-IE browsers (which have fairly good support for HTML5 in IE 9) already support a lot of HTML5 features. At present, there is no unified way to play video, most of which rely on FLASH or other player plug-ins, so the standard for playing video is defined in the HTML5 specification, in which two video formats are currently supported: Ogg file (Ogg full name should be OGGVobis (oggVorbis) is a new audio compression format, similar to MP3 and other music formats. Ogg is completely free, open and without patent restrictions. The extension of the OggVorbis file is .OGG. The Ogg file format can be continuously improved in size and sound quality without affecting old encoders or players) and

MPEG4 file format. To display a video in HTML5, you can do it in the following ways:

# div_code img {border:0px;}

This control has properties like Play,pause and volume, as well as width and height. The following is a list of related attributes:

Autoplay: this attribute indicates whether the video is played automatically or manually after loading.

Controls: specifies whether the control is displayed.

Height: height of the player.

Loop: specifies whether to set this control to loop video playback.

Preload: specifies whether the control starts loading video when the page loads. If this property is not set, it defaults to the autoplay property.

Src: the path where the video file is played.

Width: width of the player

Poster: the picture displayed when there is no video.

Next, we will begin to design the video control step by step.

Step 1

First of all, we use Visual Studio 2010, of course, you can also use the free Visual Web Developer Express.

The HTML5 video player we are going to design is just a simple example. It may look a little different in different browsers that support HTML5. For example, under FireFox, it will look like the following:

▲

Step 2 create a custom component project

First, we must create a new class library project to store our custom controls. After creating a custom control in a separate class library, we can compile it into a separate DLL so that it can be used when needed in other projects.

Open your established asp.net web project solution with Visual Studio 2010. In the solution Resources browser, right-click the solution name and select add Project from the pop-up menu. In the next pop-up menu, select Web as the project type, select ASP.NET Server Control, name the project as CustomerControl, and click to complete this step, as shown below:

Step 3 start designing a custom Web control

In Explorer, right-click the CustomControls project, select "Add New Item", select the category directory of Web in the pop-up menu, and then select the ASP.NET Server Control option in the template, as shown below:

Name the control VideoPlayer.cs, click OK, and * Visual Studio generates the preliminary code for us as follows:

# div_code img {border:0px;} 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 (")] 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);}

We are going to modify the above code, which is as follows:

# div_code img {border:0px;} 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 (")] public class VideoPlayer: WebControl {}}

Note that in the default code, the Text property is generated for the control, but it is not needed here, so we set the

# div_code img {border:0px;}

[DefaultProperty ("Text")]

Delete this line.

Step 4 continue to add properties to the control

Based on the previous introduction, we began to add some properties to the control, which are as follows:

VideoUrl: specify the address for video playback.

PosterUrl: this is the address of the alternative image displayed when there is no video.

AutoPlay: indicates whether the video is automatically loaded and played.

DisplayControlButtons: indicates whether the related buttons for playback are shown or hidden.

Loop: indicates whether the video is played automatically.

The code after adding the attribute is as follows:

# div_code img {border:0px;} 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 (")] 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;}}

Step 5 modify the RenderContents method

The main purpose of server-side controls is to output content to the browser. Therefore, as developers, we must set what kind of content our controls want to output to client browsers. Therefore, we can rewrite the RenderContents method as follows:

# div_code img {border:0px;} protected override void RenderContents (HtmlTextWriter output) {}

Note that this method has a parameter output that takes HtmlTextWriter as the object, which can be set to output HTML to the browser, and it has many methods and properties, such as AddAttribute and RenderBeginTag.

Next, we add the method code for the control to output to the browser, as follows:

# div_code img {border:0px;} 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");}}

Step 6 output the VIDEO tag content

Then, you can output the contents of the video tag, and then add the following code:

# div_code img {border:0px;} 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 ()

When we output the content of the tag, we first use the RenderBeginTag method to output a tag video to the browser, and use RenderEndTag to indicate that the tag content has been output. Next, in the above code, we determine whether the video file of the specified file format exists, and if so, output according to the specified file format.

* in order to prevent the ASP.NET control from being exported to the browser with a span tag, we can remove it by overriding the render method, as follows:

# div_code img {border:0px;} protected override void Render (HtmlTextWriter writer) {this.RenderContents (writer);}

Step 7 compile the build control

Select the Build menu to generate the entire solution, as shown below:

Step 8 put the control in the toolbox

Next, we will put the controls we have made into the toolbox for future use. The steps are as follows:

1) Open the toolbox view, right-click in the blank space, and click choose item in the pop-up menu

2) Select the .NET component card from the pop-up menu, and select Browse, and browse to the CustomControls.DLL,*** point in the bin\ debug directory of the CustomerControll project we just finished, as shown below:

At this point, the control appears in the toolbox, as shown below:

Step 8 add the control to the aspx page

You can easily create a new aspx page and drag the control from the toolbox to the page. You can see the following code:

We can also specify each property of this control when designing the view in design. Look, isn't it very simple and convenient?

* run our program and you can see the player shown below:

The above is how to understand the construction of HTML5 video controls in ASP.NET 4. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.