Published: 10 Nov 2011
By: Xianzhong Zhu
Download Sample Code

In this second part of this series, we will start to develop the detailed pages in the YouTube-like sample website. And as usual, we will mainly dwell upon the key tips in the related parts.

Contents [hide]

  • Part 1 In this series of articles, we'll try to build a popular YouTube-like video playing website using ASP.NET related techniques.
  • Part 2 In this second part of this series, we will start to develop the detailed pages in the YouTube-like sample website. And as usual, we will mainly dwell upon the key tips in the related parts.
  • Introduction

    In this second part of this series, we will start to develop the detailed pages in the YouTube-like sample website. And as usual, we will mainly dwell upon the key tips in the related parts.

    NOTE

    The development environments in the sample project will involve:

    1. Windows XP Professional (SP3);

    2. .NET 3.5 (SP1);

    3. Visual Studio 2008 Professional (SP1);

    4. Microsoft SQL Server 2008;

    5. The famous open-sourced video transformation tool ffmpeg.exe.

    Design the Homepage

    First of all, let's take a look at the homepage of the sample website PlayVideo. As a typical naming selection, we named the page Index.aspx. In this homepage, you will see all the video columns supported by the site, such as funny videos, Sports videos, file appreciation, and cartoons. Figure 1 illustrates the homepage screenshot of our sample website called mytube.

    Figure 1: The homepage screenshot of our sample website mytube

    The homepage screenshot of our sample website mytube

    As you could see in the above figure, we've built a typical video playing website as you commonly see. Therein, the site provides support for membership management, ranking list, personal management, internal bulletin board, and advertisement placeholders, etc. Next, let's look closely into the techniques utilized in building this page.

    Use ASP.NET State Service to store session data out-of-process

    In developing ASP.NET applications, we often use Session to store data. However, sometimes data in the Session may get lost because of some file under the Bin folder may be modified or some other unknown factors. We know that in the file web.config we use the mode property to set up the Session related store state. And also, the default value of the mode property is 'Inproc', which results in the save state of Session depending upon the ASP.NET process. The fact is the ASP.NET process is unstable, as a result of which when some events take place they may cause the process to restart, which will further result in the loss of Session.

    The ASP.NET State Service provides support for storing session data out-of-process. On the whole, there are basically three ways that session data can be stored: in- process, SQL database, or out-of-process. If session data is stored in-process, the data is stored in ASP.NET's memory space, thus making the ASP.NET process responsible for accessing and maintaining session data, the deficiency of which has been covered above. Session data can also be stored in a SQL database, thus making the database responsible for accessing and maintaining session data. This is another topic that will not be discussed in this article. Our policy in this case is to keep the session data out-of-process, i.e. the data will be accessed and maintained by a separate process' memory space. To do this, we can follow the steps below.

    1. In the file web.config, set the parameter mode in sessionState to StateServer.

    2. Open up the Windows Control panel and locate the Management Tools item. In the Management Tools, find the ASP.NET State Service and start it. Another way to start this service is click 'Start'-'Run...' and then in the blank command line enter 'services.msc' and press OK. Next, in the Service panel you can easily find a service named 'ASP.NET State Service' and then start it.

    User controls and AJAX techniques

    As you have imaged, the page Index.aspx contains so much info that we have to resort to some ASP.NET tips to construct it. In fact, User controls are just the things to help us. In authoring complex ASP.NET Web pages, in addition to using Web server controls, we can create our own custom, reusable controls using the same techniques as we use for creating ASP.NET Web pages. These controls are called user controls. A user control is a kind of composite control that works much like an ASP.NET Web page - you can add existing Web server controls and markup to a user control, and define properties and methods for the control. You can then embed them in ASP.NET Web pages, where they act as a unit.

    The following gives the typical usage of our user controls in composing the above page Index.aspx.

    1. Declare where and what user controls to use in the page Index.aspx at the very top of it.

    2. Cite the user control inside HTML elements or ASP.NET server controls.

    That's it. As for how to construct the user controls, we'll discuss them later on.

    Anyway, another important thing we must mention here is the AJAX topic. In fact, as you will see later, in building some of the user controls, we leveraged AJAX support so as to gain some more friendly locally updating effects in the final client-side pages. And according to the basic principles of using ASP.NET AJAX, we had better use light-weighted control ScriptManagerProxy in the user controls instead of the control ScriptManager. However, when using the user controls in the target Web pages, we have to manually add the control ScriptManager inside them because some of the important functionalities ScriptManagerProxy has not provided. So, for the page Index.aspx things are the same.

    As you see, the typical location for the control ScriptManager is just following the form element. An important principle here is we must refer to the control ScriptManager before any ScriptManagerProxy control. As for other more details about the control ScriptManager, you can easily find tons of info at the online MSDN site or other sites since it has already been a mature technique in building world-wide ASP.NET websites.

    Another AJAX server control to use is UpdatePanel. As for the UpdatePanel control, there are too much tips to research into, but our main interest here is not this, so we are not to detail into it. Anyway, the action of the UpdatePanel control must be clarified: it is used to enclose an ASP.NET server controls composed area in the ASP.NET page to gain partially update effect together with the above ScriptManager control. Now, let's look at the stuffs around the UpdatePanel control in the page Index.aspx.

    As is seen, the above code is related to the login function. And the aim is easily seen too: when the user logs in, a related dialog will pop up to tell the related info in the form of locally updating AJAX style.

    Now, let's look at the related behind code.

    Things are clear: when the user clicks the login button, the system first checks whether the related data exist in the database or not. No matter the user exists or not, we give the related tip info in the AJAX style. Here, the helper method ShowAjaxDialog is defined in another helper class Tools, as follows:

    Again, you saw the importance of the control ScriptManager. In this case, we use the method RegisterStartupScript to register a startup script block with the ScriptManager control and add the script block to the page. For more info about ScriptManager and the method RegisterStartupScript, you can refer to MSDN; we are not to delve into them.

    Use DataList control and HTML inline programming tips

    In the homepage Index.aspx, we've used a couple of DataList controls since we have much info to render. The following illustrates an example of using the DataList control to render the funny videos related info in the homepage.

    In the file Index.aspx.cs we have already bound the required data to the above DataList control named dlHumour, so here what needs for us to do is just use the related templates (such as ItemTemplate) and the Eval method to render the server- side data.

    Besides the DataList control, another point to notice is the following:

    You may remember that we defined a couple of helper methods in two helper classes, operateMethod and operateData, under the App_Code folder. Here we used the static method interceptStr, which is the commonly-seen stuff in the latest ASP.NET MVC based applications; also, we are no more to detail into it.

    Bind server-side data to DataList

    Finally, let's look at how the server-side data are bound to the ASP.NET server control DataList.

    Although lengthy the above code is still easy to understand. Here we construct the responding SQL clauses and invoke the related helper methods defined in the helper class operateData to obtain data from the server-side database. And finally, the data are bound to the DataSource property of the various DataList controls. That's all!

    Starting from the next section, we are going to discuss the personal management related topic – upload favorite videos.

    Upload Videos

    After a common user logs into the system and he clicks the link 'personal management' at the top of the homepage, he will be navigated to another page \userInfo.aspx. The related figure is show below.

    Figure 2: The screenshot of the personal management page

    The screenshot of the personal management page

    Next, if the current user clicks the link 'Upload' at the left side, the upload video page will be opened, as follows.

    Figure 3: The screenshot of the upload video page

    The screenshot of the upload video page

    As is indicated, the user can fill in the video title, simple content description, and then click the 'browser...' button to select a video file that matches the specified extension (in this case we only permit the three popular formats, .flv, .avi, and .wmv). And also, he can specify the video type he wants to upload. If all the info is valid and the user clicks the button 'Upload' the video file will be submitted to the website and related info will be correspondingly stored into the database.

    Since the HTML markups related design in the page UserInfo.aspx is nearly the same as that in the page Index.aspx, we will no more list them. And also, the behind coding related to this page is similar to the file Index.aspx.cs, we do not list it, too; you can refer to the downloadable source code yourseleves.

    Next, let's shift our attention to the popular video format transformation tool –ffmpeg.exe.

    Use the tool ffmpeg.exe

    As indicated previously, we select the open-sourced tool ffmpeg.exe to achieve the target of file type transformation. As is well known, currently most welcome podcast websites use Adobe Flash to create their custom .flv players. Such players can help to make the users uploaded file formats unified, faster page load speed to diminish the buffer time.

    As you image, when the user upload the videos, the system should first check the video types. If the users' file format is not .flv, we should consider file transformation. Currently, we select to use the popular open-sourced tool ffmpeg.exe which can transform most popular video file formats except for .rm and .rmvb. However, the two file formats related transformation is still easy- you can resort to another open-sourced tool MEncoder at the sourceforge website. In the sample project, I've not provided this tool, you can download it yourselves.

    Now, let's focus upon the upload operation related to the file upvideo.aspx. When the user clicks the button 'Upload' the following code will be triggered.

    Since the detailed comments have been provided, I only want to stress three points below:

    1. The reason why we use the method catchImg to capture an image of the video file is we will use this image as one of the snapshots of the video story at somewhere in the website.

    2. We use the helper method changeVideoType to achieve the target of file format transformation.

    3. Purposefully I've not utilized the AJAX style in the page upvideo.aspx; elementary readers can Ajaxify these pages referring to the page Index.aspx.

    Finally, the arguments we used related to the tool ffmpeg.exe are as follows:

    Related notes are given below:

    Name: the full file path that required to be transformed;

    -ab: the audio bit rate;

    -ar: the audio sample rate;

    -qscale: fixed video quantified scale;

    -r: frame rate, 25 by default;

    -s: frame size, format being WXH, 160X128 by default;

    widthOfFile, heightOfFile: the width and height of the frame;

    flv_file: the path where to save the transformed file.

    Summary

    In this second part of the series, I've introduced two main topics around the homepage and the upload video page, as well as related tools. In learning the source code yourselves, you'd better notice the following points:

    • How to Ajaxify an ASP.NET web page and a user control using UpdatePanel, ScriptManager, and ScriptManagerProxy;
    • During the course of scheduling a homepage of your podcasting website refer to other popular video playing sites first and carefully;
    • Selecting the appropriate video type transformation tools is necessary in constructing a postcasting website;
    • Massive network storage space is also a MUST HAVE in creating a postcasting website.

    In the next (last) part of this series, I will introduce how to play the user selected videos, make related comments, as well as detail into designing the sports video channel of the sample website.

  • Part 1 In this series of articles, we'll try to build a popular YouTube-like video playing website using ASP.NET related techniques.
  • Part 2 In this second part of this series, we will start to develop the detailed pages in the YouTube-like sample website. And as usual, we will mainly dwell upon the key tips in the related parts.
  • <<  Previous Article Continue reading and see our next or previous articles Next Article >>

    About Xianzhong Zhu

    I'm a college teacher and also a freelance developer and writer from WeiFang China, with more than fourteen years of experience in design, and development of various kinds of products and applications on Windows platform. My expertise is in Visual C++/Basic/C#, SQL Server 2000/2005/2008, PHP+MyS...

    This author has published 81 articles on DotNetSlackers. View other articles or the complete profile here.

    Other articles in this category


    Code First Approach using Entity Framework 4.1, Inversion of Control, Unity Framework, Repository and Unit of Work Patterns, and MVC3 Razor View
    A detailed introduction about the code first approach using Entity Framework 4.1, Inversion of Contr...
    jQuery Mobile ListView
    In this article, we're going to look at what JQuery Mobile uses to represent lists, and how capable ...
    Exception Handling and .Net (A practical approach)
    Error Handling has always been crucial for an application in a number of ways. It may affect the exe...
    JQuery Mobile Widgets Overview
    An overview of widgets in jQuery Mobile.
    Book Review: SignalR: Real-time Application Development
    A book review of SignalR by Simone.

    You might also be interested in the following related blog posts


    GiveCamps Get a new Sponsor read more
    VideoWicki A Open-Book Design-To-Delivery Silverlight 3 Project read more
    Script for Bulk Import of Active Directory Site Links read more
    Script for Bulk Import of Active Directory Subnets read more
    Adding QueryString Parameters to the SiteMapNode read more
    Party with Palermo @ DevTeach is tomorrow!! read more
    ASP.NET Menu and SiteMap Security Trimming (plus a trick for when your menu and security don't match up) read more
    ASP.NET 3.5 Extensions CTP Preview Released read more
    Popfly beta read more
    CardSpace: How Personal Cards Protect Users read more
    Top
     
     
     

    Discussion


    Subject Author Date
    placeholder Source code Amador Cuenca 12/1/2011 2:18 PM
    RE: Source code Sonu Kapoor 12/2/2011 12:29 AM
    placeholder Hi Xianzhong Zhu 12/1/2011 10:16 PM
    RE: Hi Boby Aditya 12/10/2012 3:08 AM
    placeholder Source code Amador Cuenca 12/2/2011 7:22 AM
    RE: Hi Amador Cuenca 12/2/2011 7:27 AM
    placeholder RE: RE: Hi Sonu Kapoor 12/2/2011 9:31 AM
    RE: RE: RE: Hi Amador Cuenca 12/2/2011 10:18 AM
    placeholder HI Boby Aditya 12/10/2012 12:10 AM
    RE: HI Moataz Zulfecar 7/21/2013 3:58 PM
    placeholder HI Boby Aditya 12/10/2012 12:13 AM
    website like youtube send me the proper code plzz Dhanshree Mestry 1/9/2014 4:14 AM
    placeholder Hi Elahe Hahsemi 4/15/2014 8:15 AM

    Please login to rate or to leave a comment.