Introduction

In this final part of this series, we are going to discuss how to make the users play their selected videos, make possible related comments. And then, we will introduce how to manage sports video channel relate data in the role of an administrator.

Enjoy Selected Video Program

When any user opens the homepage Inde.aspx of our sample website mytube, he can click his/her favorite video program to enjoy it. Figure 1 shows the very beginning of the running-time snapshot of the playing video interface.

Figure 1: Just enter into the video playing interface

Next, when the user clicks anywhere at the player, the program starts to play. Figure 2 illustrates one of the running-time snapshots.

Figure 2: The video playing interface in action

About the player

Embedding the Flash player inside an ASP.NET page needs to use some tricks. First, let's look at the HTML markup code inside the page play.aspx.

Pretty simple, isn't it? Well, let's continue to observer the related behind coding.

Since there are already enough comments provided between the lines, let's ignore the trivial explanation to track to what happens with the helper method GetFlashText.

I believe that you are sure to have seen the similar things like above. It is right the scripts that are behind any Flash playing web pages! Here we pass the required parameter (the player and the target video name) to composite the complete script scrap and pass it to the Text property of the Literal control.

As you've also seen, we used a Flash execute file named player.swf to act as the player. As for this file, it's unnecessary for you to further research into it. It is just a player implemented using my Adobe Flash CS5. In fact, if you know a bit of Flash programming you can easily build up a new one for you own.

After the user watches the video program, he can make comments about the program. Next, let's explore some of the related techniques in this respect.

Use javascript to control the number of the input words

In the page play.aspx, there is a small javascript tip we used to limit the maximum number of the user input words.

Correspondingly, let's look at the related HTML markups.

In this case, whenever the user enters a character the event handler onKeyUp will be triggered and the javascript method change will be called. In this method, when a character is entered the total character count is recorded to limit the total number to 500 words.

Use IP address to prevent from repeated submission

As covered previously, after the user enjoys the program he can enter comments and submit it to the server side. However, repeated submissions will not only result in the overload of the system but lead to distortion of the facts of the voting. To prevent false voting we only permit one IP to vote only once. In general, the voting module uses Cookie to prevent repeated voting. But, due to the fact that the Cookie storage in the client side will also be possible to lead to false voting, in this case we use the server-side database to persist the voter's IP address to prevent repeated voting. The main idea is to grab the client-side IP and make judgment whether this IP has voted. If so, the system will pop up related tips; or else, store the IP address to the server side database. To obtain the IP data, we can resort to the UserHostAddress property of the Request object.

Now, let's follow up the scent to see the related implementation in the behind code.

Also, I only used the common server-side method RegisterStartupScript to show a common browser alert dialog rather than use the AJAX approach. However, you can easily substitute the AJAX solution for the above one referring to the preceding implementation we introduced before.

Use the timer mode to display the comment publishing time

In the traditional means of publishing comments datetime mode is commonly-selected. For example, you often see the comments are released on some minutes some hours of some day some month in some year. In our case, if the comments are released within 24 hours, the comments will be displayed in the form similar to "The visitor released comment within ...seconds/minutes/hours..." Refer to Figure 3 below.

Figure 3: Show the comment datetime

The above function is achieved through the method getIsDate.

In the above method, by calculating the datetime difference, we judge whether the comment is released with how many hours, minutes, or seconds. Here we used TimeSpan to store the diffidence of two dates and used the TotalSeconds property to convert the difference to seconds.

Behind code programming

The video playing module is rather important, so we will detail into the behind code programming. First, we define some variables to hold the video play related info.

Next, in the Page_Load event handler of the page, we first judge whether the current user has logged in. If so, then show the welcome panel; otherwise, hide the welcome panel and show the login panel.

As is shown, if the page first loads then we invoke the method addPlaySum to increase the hit rate. Finally, we call the method videoInfo to play the video and show detailed video info and invoke another method bidList to show the audiences' comments.

Vote for the program

Besides the comment, the system also provides support for vote functionality. Figure 4 illustrates the related snapshot.

Figure 4: Click the related buttons to vote for the current video

If the user clicks the button imgBtnD the following event handler will be triggered. In another word, the user clicks this button to vote in favor of this video program.

However, if the user clicks another button imgBtnC the related event handler will be triggered. In another word, the user clicks this button to vote against this video program.

Manage Sports Video Data

Starting from this section, we will shift our attention to the backend sports video related management. As for other types of videos, you can refer to the downloadable source code yourselves.

After you launch the homepage Index.aspx, please click the hyperlink 'Administrator Login' at the bottom. Then, the special backend login page appears, as shown in Figure 5.

Figure 5: The backend login page

Next, enter the user name 'mr' and password 'mrsoft' and you will be navigated to the backend management system. The related screenshot is shown in Figure 6 below.

Figure 6: The backend management system

As is seen, the backend management system provides fundamental support for video data, including category management, user management, bulletin management, advertisement management, and month ranking list. Through this page, you can list all video files, un-reviewed ones, and reviewed ones. And also, you can change video review state and remove certain videos as needed.

Change video review state

Changing video review state is finished in the SelectedIndexChanging event handler.

As the comments show, we first obtain the current review state. If the current review state is true, then we set it to false; if the state is false, set it to true. Finally, store the review state to the backend database.

Next, let's look at the implementation of the method bindGvVideo.

In the above code, we've only discussed the sports video related topic. As for other categories of video related management, please refer to the source code yourselves.

Summary

In this final part of the series, we've explored the rest parts: video play, making comments, voting for the programs. And then, we made a short discussion concerning the backend management system targeting the sports video channel. As you've seen, as a simple ASP.NET based sample podcasting website, we've just touched some of the fundamental and necessary techniques. In creating a real podcasting websites, however, there are still many aspects to research into, such as effective buffering support in the face of massive podcasting data visit, dynamically adding proper numbers of advertisements before the real videos are played or during the course of the play, verifying the legitimacy of user submitted videos, more effective and comprehensive introduction of AJAX techniques to better the client-side user experience, using anti-span/virus techniques when the users submit their comments, etc.

In a word, although the sample video playing project in this series just brought you a start it did exhibit you the core techniques in constructing such websites. Finally, wish you, referring to the tips in this series, to create your own ideal and welcomed video websites.

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.