Jun. 05,
2007
ZoozleTV
PROJECT
BOOK
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
Table of Contents
What is ZoozleTV? ............................................................................................................. 4
ZoozleTV's Functionality ................................................................................................... 4
Watch Videos .................................................................................................................. 4
Register to ZoozleTV ...................................................................................................... 4
Uploading a video ........................................................................................................... 5
Tag marking ................................................................................................................. 5
Share video...................................................................................................................... 5
Rate a video..................................................................................................................... 5
Categories ....................................................................................................................... 6
Search .............................................................................................................................. 6
"More from the same creator"......................................................................................... 6
Related videos ................................................................................................................. 6
Ease of use ...................................................................................................................... 7
Language ......................................................................................................................... 7
Performance requirements .............................................................................................. 7
Operational requirements ................................................................................................ 7
Development phases ....................................................................................................... 7
Costs................................................................................................................................ 8
Design ................................................................................................................................. 9
Overview ......................................................................................................................... 9
Introduction ..................................................................................................................... 9
Database Design............................................................................................................ 13
Videos table ............................................................................................................ 14
Tags Tables ............................................................................................................. 15
Category table ........................................................................................................ 15
Presentation Layer’s features ........................................................................................ 15
Introduction ................................................................................................................... 15
ASP 2.0 ..................................................................................................................... 15
AJAX ......................................................................................................................... 16
Flash ......................................................................................................................... 17
Tag Search Algorithms ................................................................................................. 18
Free Text Search ........................................................................................................... 20
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
Joining Tag Search and Free Text Search..................................................................... 20
Related Videos .............................................................................................................. 21
Website ............................................................................................................................. 22
How to build a website? ................................................................................................ 22
How is ZoozleTV built?................................................................................................ 23
Master Page ............................................................................................................... 23
Login page ................................................................................................................ 23
Register page ............................................................................................................. 24
Upload page .............................................................................................................. 24
Main page.................................................................................................................. 25
User page .................................................................................................................. 26
Results page .............................................................................................................. 26
Category page ........................................................................................................... 26
Technologies ..................................................................................................................... 27
SQL ............................................................................................................................... 27
Website ......................................................................................................................... 27
Detailed description of interesting components ............................................................ 27
Video List.................................................................................................................. 27
Upload Video ............................................................................................................ 28
Creating Previews of Videos .................................................................................... 29
Requirements for deployment ..................................................................................... 31
Steps that need to be taken.......................................................................................... 31
User Guide ........................................................................................................................ 33
Main web page .............................................................................................................. 33
Register webpage .......................................................................................................... 34
Login webpage .............................................................................................................. 35
UploadProgress webpage .............................................................................................. 35
Upload webpage............................................................................................................ 36
Share Video with Friend ............................................................................................... 37
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
Introduction
What is ZoozleTV?
Nowadays, one can see a great amount of video blogs around the internet (YouTube,
Metacafe etc). The main functionality of these video blogs is to allow people from all
around the world to share their videos among others. Besides the possibility for video
creators to share their material, it also provides hundreds of hours of entertainment for
users who just want to watch new exciting video clips. ZoozleTV is another video blog
which uses the latest technologies (such as Ajax) to provide the best viewing experience
out there.
ZoozleTV's Functionality
Watch Videos
The main page of ZoozleTV is a list of the most viewed videos and an option to view
each one of them. The site also allows getting videos by date, from a specific user, from
a specific category, etc.
Register to ZoozleTV
A person can become a member of ZoozleTV. When doing so, he will get some privileges
(ability to upload a video, share a video with friends). The registration process is a short
one, where the user is asked to provide some details about him, and particularly a login
name and password.
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
Uploading a video
A registered user will be able to upload as many videos as he wants. The user will be
asked to enter some details for the video such as name and description, to make the
video as “reachable” as possible by other users. Every uploaded video is saved in the
system and is never deleted.
Tag marking
After a user uploads a video, he will be asked to provide “Tags” for the videos. These
tags will be used for a tag based searched (more details ahead). For example, if a user
uploaded a video trailer of a game, he may wish to add the tags:
“game”,”trailer”,”game_name”, etc.
Share video
A registered user will be able to share a video with his friends. The link to the shared
video will be sent to his friends by email. The option to save mail will appear right after
(and while) watching a video.
Rate a video
The rating methodology will be a star based one. After a user finished viewing a video,
he will have an option to rate his selected video. The rating options will be from 1 star to
5 stars. Every user may rate each video a single time per session, but unlimited times in
different sessions. The idea is that a user will not use this method to boost his own
created video.
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
Categories
All the videos in ZoozleTV are categorized (Action, sports, music etc). A user can choose
a category and will get the most viewed videos of that category.
Search
ZoozleTV provides three search methods of videos:
O
Free text search.
O
Tag search
O
Tag and free text search together.
More details about the search methodology later in this document.
"More from the same creator"
When a user plays a video in ZoozleTV, he will be able (with only one click) to get more
videos from the creator of the original video (sorted by most viewed).
Related videos
When a user plays a video, he will get a list of the most related videos to the original
video sorted by most viewed. The relevance is decided by a tag search on the video’s
tags.
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
Ease of use
The web site will be easy to use and friendly to all spectrums of ages. Ajax technology is
used to make the web site more interactive and user-friendly.
Language
The product will have an English interface.
Performance requirements
The system will be robust enough in order to accommodate hundreds of multiple users.
The system will be scalable and could be adjusted to support an unlimited number of
concurrent users.
Operational requirements
ZoozleTV has no special requirements from its users, although the web site will be best
viewed using Internet Explorer 6.0 or better.
Development phases
1. Implementation + Design document
2. Finalization and presentation.
3. Creating ZoozleTV’s project web page
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
Costs
Every week we will invest a working day on the project. At an hourly fee of 65 NIS we're
talking about: 14*10*65 *2 = 18200 NIS.
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
Design
Overview
ZoozleTV is a web service, which uses an SQL server for database services.
Figure 1. Overview of the Zoozle-TV system
Introduction
Layered development or multi-layer development refers to a development model where
presentation, business logic and data are separated. This brings many advantages, including
cleaner code, increased maintainability and the ability to spread your application's load over
multiple servers.
Zoozle-TV was designed as a 3-layers application:
Presentation Layer
1
6
Business Logic Layer
2
5
Data Access Layer
3
4
Database
Figure 2. The Layers in the Zoozle-TV application
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
1. Presentation layer – This layer is responsible for showing the data to the user in a graphic
manner. In the Zoozle-TV we use a web site.
2. Business Logic Layer, or the BLL - the bridge between the Presentation layer and the next
layer: the Data Access Layer.
3. Data Access Layer or the DAL - talks to the database to perform selects, inserts, updates
and deletes. In the Zoozle-TV system we use an SQL server 2005 database.
One of the ideas of this design is that you can replace one or more of the layers without
affecting the others. So, you could for example drop the web site as the presentation layer and
replace it with a Windows Forms application. This change wouldn't require a change in any of
the other layers. Similarly, you should be able to remove a SQL Server specific DAL and replace it
with an Oracle or Microsoft Access version without the Presentation layer even noticing the
difference.
In the diagram in figure 2 appears a process go around in a counter clockwise direction. The
process goes through the following 6 steps:
1. The Presentation layer asks the BLL for some object, for example a Video.
2. The BLL forwards the request to the DAL.
3. The DAL connects to the database and asks it for a specific record.
4. When the record is found, it is returned from the database to the DAL.
5. The DAL wraps the database data in a custom object and returns it to the BLL.
6. The BLL returns the object to the Presentation layer, where it could be displayed on a web
page.
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
-End2
0..*
-End1
1
Figure 3 – Zoozle-TV class diagram
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
Some words on the class diagram:
 Classes which participate in the BLL – User, UserManager, Video, VideoManager,
VideoComparer, VideoList.
 Classes which participate in the DAL – UserDB, VideoDB, DBUtils.
 Classes which participate in the presentation layer: WebUtils, Upload, and many other form
classes which do not appear here, which display the data to the user in a graphic manner.
Now, we can see how the 3-layers approach falls into place with our Zoozle-TV system. Let’s see
an example of how to access the data of a Video in the system:
Presentation Layer
1
6
Returns a Video
BO
Get a video
Business Logic Layer
2
5
Get a Video
from the data
layer
Returns a Video
BO
Data Access Layer
3
4
Get a Video
from the videos
table
Returns a Video
record
(as a DbDataRecord)
Database
Figure 4 - The Layers in the Zoozle-TV application: Video example
1. The Presentation layer, for example an ASPX page called Main.aspx, asks the BLL for
some object, for example a Video. It does this by calling VideoManager.GetItem() and
passing it the ID of the video.
2. The BLL forwards the request to the DAL by calling VideoDB.GetItem().
3. The DAL connects to the database and asks it for a specific record. It does this by
executing a stored procedure, like getVideoDetailsByName and passing it the ID of the
contact person.
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
4. When the record is found, it is returned from the database to the DAL in a
SqlDataReader object.
5. The DAL wraps the database data in a custom Video object from the BO namespace and
returns it to the BLL.
6. Finally, the BLL returns the Video object to the Presentation layer, where it could be
displayed on a web page for example.
Database Design
Figure 5 – Zoozle-TV Database diagram
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
All of the ZoozleTV data is stored in an SQL database in several tables:
Users table
ZoozleTV supports registered users functionality which allows enhanced abilities for those users
(like uploading a video, sharing a video by email etc.). The information about the registered user
is stored in this table. This table contains the following columns:
 ID – unique and is defined automatically (auto increment)
 Private name
 Sir name
 Email
 Username
 Password
 Country
 Videos upload number – the number of videos uploaded by this user
 Average rate of videos - the average rating of the user’s videos
Videos table














When one of our millions of users uploads a video, its details are saved in this table. Video's
details contain the following information:
ID – unique and is defined automatically (auto increment)
Name
Description
Category
Tags – Tags is a common feature which can be found in blogs. When a user uploads a video
he can Tag it with as many tags as he wants. Afterwards, when another user will want to
search for a video, he could do it by the tag method as well.
Video's path – ZoozleTV's videos are saved on the Web server's file system. However, we
need to save the location of that video in case it will need to be played.
Video's image path – In the main page or after a search in ZoozleTV, the user gets a list of
videos. Each video in the list is displayed with an image (a captured frame) from that video.
For that we need to save the Image path.
Uploader user ID
Average rating
Number of votes
Views
Date added
Size
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
Tags Tables
Each tag has its own table named "tag_" + tagName + "Tbl and contains the 2 columns:
 VideoID
 Rating
Each tag table will contain a list of videos id’s (and their respective rating) which have this tag.
We will see the usage of these tables when describing the search by tag algorithms.
Category table



ID – unique and is defined automatically (auto increment)
Name
Description
Presentation Layer’s features
Introduction
The presentation layer was built using .ASP 2.0 and relies heavily on Ajax. Some elements of
Flash are also in use.
ASP 2.0
ASP.NET is a programming framework built on the common language runtime that can be used
on a server to build powerful Web applications. ASP.NET offers several important advantages
over previous Web development models:



Enhanced Performance. ASP.NET is compiled common language runtime code
running on the server. Unlike its interpreted predecessors, ASP.NET can take
advantage of early binding, just-in-time compilation, native optimization, and caching
services right out of the box. This amounts to dramatically better performance before
you ever write a line of code.
World-Class Tool Support. The ASP.NET framework is complemented by a rich
toolbox and designer in the Visual Studio integrated development environment.
WYSIWYG editing, drag-and-drop server controls, and automatic deployment are
just a few of the features this powerful tool provides.
Power and Flexibility. Because ASP.NET is based on the common language
runtime, the power and flexibility of that entire platform is available to Web
application developers. The .NET Framework class library, Messaging, and Data
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV





Access solutions are all seamlessly accessible from the Web. ASP.NET is also
language-independent, so you can choose the language that best applies to your
application or partition your application across many languages. Further, common
language runtime interoperability guarantees that your existing investment in COMbased development is preserved when migrating to ASP.NET.
Simplicity. ASP.NET makes it easy to perform common tasks, from simple form
submission and client authentication to deployment and site configuration. For
example, the ASP.NET page framework allows you to build user interfaces that
cleanly separate application logic from presentation code and to handle events in a
simple, Visual Basic - like forms processing model. Additionally, the common
language runtime simplifies development, with managed code services such as
automatic reference counting and garbage collection.
Manageability. ASP.NET employs a text-based, hierarchical configuration system,
which simplifies applying settings to your server environment and Web applications.
Because configuration information is stored as plain text, new settings may be applied
without the aid of local administration tools. This "zero local administration"
philosophy extends to deploying ASP.NET Framework applications as well. An
ASP.NET Framework application is deployed to a server simply by copying the
necessary files to the server. No server restart is required, even to deploy or replace
running compiled code.
Scalability and Availability. ASP.NET has been designed with scalability in mind,
with features specifically tailored to improve performance in clustered and
multiprocessor environments. Further, processes are closely monitored and managed
by the ASP.NET runtime, so that if one misbehaves (leaks, deadlocks), a new process
can be created in its place, which helps keep your application constantly available to
handle requests.
Customizability and Extensibility. ASP.NET delivers a well-factored architecture
that allows developers to "plug-in" their code at the appropriate level. In fact, it is
possible to extend or replace any subcomponent of the ASP.NET runtime with your
own custom-written component. Implementing custom authentication or state
services has never been easier.
Security. With built in Windows authentication and per-application configuration,
you can be assured that your applications are secure.
.ASP 2.0 is the newest version of ASP by Microsoft.
AJAX
Ajax, or AJAX, is a web development technique used for creating interactive web
applications. The intent is to make web pages feel more responsive by exchanging small
amounts of data with the server behind the scenes, so that the entire web page does not
have to be reloaded each time the user requests a change. This is intended to increase the
web page's interactivity, speed, functionality, and usability.
The name is an acronym standing for Asynchronous JavaScript and XML. Ajax is
asynchronous in that loading does not interfere with normal page loading. JavaScript is
the programming language in which Ajax function calls are made. Data retrieved using
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
the technique is commonly formatted using XML, as reflected in the naming of the
XMLHttpRequest object from which Ajax is derived.
Ajax is a cross-platform technology usable on many different operating systems,
computer architectures, and Web browsers as it is based on open standards such as
JavaScript and XML, together with open source implementations of other required
technologies.
Flash
Adobe Flash, or simply Flash, refers to both the Adobe Flash Player, and to the Adobe
Flash Professional multimedia authoring program. Adobe Flash Professional is used to
create content for the Adobe Engagement Platform (such as web applications, games and
movies, and content for mobile phones and other embedded devices). The Flash Player,
developed and distributed by Adobe Systems (which acquired Macromedia in a merger
that was finalized in December 2005), is a client application available in most common
web browsers. It features support for vector and raster graphics, a scripting language
called ActionScript and bi-directional streaming of audio and video.
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
Algorithms
Tag Search Algorithms
As mentioned previously, all the videos with the same tag are held in the same tag table. This
was done especially for the tag search. The algorithm receives a list of tags and returns the top
100 matches sorted by popularity. The algorithm ():
Input: a comma separated tag list.
1. For each (tag in Tags)
If (tag table exists)
Add the rows of the tag table to Temp_table
2. Group the temp_table by ID to a new count column (SQL function)
3. We calculate a ranking for each video:
a. calculate a penalty for the video:
IF(#matchedTags<#totalVideoTags )
penalty = ABS(#totalSearchedTags-#matchedTags)*10
ELSE
penalty = ABS(#totalSearchedTags-#matchedTags)
ranking = (100-penalty )/100
Explanation: we want to rank the video with the exact searched tags the highest. If a
video has all the searched tags and more we have a penalty, but this is penalty is
reduced compared to video which has less tags then the searched tags.
4. Select the top 100 rows of temp table primarily sorted by ranking, and secondly sorted
by rating.
Let's explain the algorithm with an example:
Let's say we have 2 tag tables:
Tag A Table:
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
And Tag B Table
And let us assume that the user is looking for tags a and b.
After phase one of the Algorithm Temp Table will look like:
In the second phase of the algorithm we add a new column Count which counts the number of
times the video appeared in tag table. In our case it will look like:
The third part is sorting the table.
The main sort is by count, and the secondary sort is by the ABS(count – number of tags)
In our case the algorithm will return:
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
The main idea of the algorithm is to return the videos that have as many tags as possible out of
the searched tags. If there are videos with the same amount of tags, the algorithm will sort them
by the "closest number of tags they have" to the number of tags matched.
Free Text Search
For the free text search we used the built in (SQL Server 2005) full text search capabilities. Fulltext search allows fast and flexible indexing for keyword-based query of text data stored in a
Microsoft SQL Server database. This engine provides a ranking of its own for each video. For
more information about this capability please refer to the web.
Joining Tag Search and Free Text Search
ZoozleTV allows users to free text search and tag search at the same time. The main
consideration of this method is how to merge the results of both searches. Our solution for this
problem was to normalize the Rank we got back in each of the methods and combine them
according to the rank. The resulted videos set is this combined set of results sorted by ranking
and rating.
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
Related Videos
Our algorithm of finding related videos is really simple. We just do a tag search with the tags of
the current viewed video. The results are the related video.
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
Website
How to build a website?
There are several files which the website contains:

*.aspx – This is what the user will see. Here you should put tables, pictures, text, videos,
etc. Here you can add components from the tool bar like dropdown lists or textboxes.

*cs – each .aspx file has a maching .cs file. The .cs is responsible of the functions that
will be run on the server (not the client). For example, the .cs file has a Page_Load
function that is called each time the matching webpage is created. This function can be
used to determine things before the page gets to the user. (i.e. if the user is logged on
or not and redirects him if necessary). Another example of using the .cs file is when
clicking a "submit" button. This will cause a postback in which submit_click function will
be called (on the server). In this function you can check and perform actions that should
be performed on submit.

Web.config –this file is stores the entire configuration needed. For example, allow
upload of files which are larger than 4 Mb.

Master page – This is a wrapper to most of the other .aspx files. It contains all the data
which is similar to all web pages in the website. After creating it, you should create all
the other web pages out of it. For example, the logo of your website can be created only
once, in the master page. And all other web pages that will be created from the master
page will automatically have it. This is used to provide a consistent look & feel for all
pages of the web site.
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
How is ZoozleTV built?
Master Page
As described above, to prevent duplication of code and work, we've created a master page that
contains all the functionality which is shared by all ZoozleTV's web pages.

Search bar – all the search functionality is built-in into the master page.

Check if the user is signed in – Each page will be able to recognize whether the user is signed
in or not. If the user is signed in it will display "hello" + username. Else it will allow him to
sign in. This is done by the session variable. When a user signs in we add a "username" field
to session which holds (surprisingly) the user's name. For each web page that is loaded we
check to see if session variable exists and if so are able to display the username. In addition,
we make the sign out link visible.

Allow a user to sign out (if he is signed in) – in this case we just remove the username
session variable, make the sign in link visible, and make the sign in link invisible.
Login page
The login page is a simple username and password page. However, we use a cookie to auto fill
the username. So, on the page_load function we check if the cookie exist, and act accordingly.
If the user has no cookie and he succeeded in signing in, we create a cookie with his username.
Another function which is done on the server side is the password check which basically makes a
SQL query to compare the password given with the stored password.
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
Register page
ZoozleTV register page is a standard register page. On the Load_page function we populate the
countries and the data dropdown lists. When a user submits his registration request, we check
several things:

Unique user name

At least 6 characters password

The password and the password confirm are equal

None of the fields are empty.
In case all the above are O.K.; we add the user to the database and update the session variable
respectively.
Upload page
ZoozleTV upload page is split into 2 sub pages:
1. UploadProgress page – In this page the user selects the file he wishes to upload and
upload occurs. We use here flash technology to track the rate of the upload process.
After (and if) the upload finished successfully the use is redirected to the 2nd upload
page.
2. Upload page – once the video is uploaded, the user inserts the video's details in this
page. In addition the image of the video (which will be used for preview) is created in
this page. Only after the user submits the details in this page the video is inserted to
ZoozleTV.
ZoozleTV allows registered users which are signed-in only, to upload videos. For this, the
UploadProgress Page_Load function checks if the user is signed in. if he isn't, it redirects him to
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
the sign-in page, otherwise it allows him to upload a video. After the video is uploaded (to the
/upload directory), UploadProgress redirects the user to the Upload page.
Upload's Page_load function is responsible of creating the preview image of the video. After the
user submits the details of the video, Upload is responsible of naming the video and its image
with the videoID (according to the sol videoTbl) ,leave the same suffix and move the video to the
/video folder and the image to /VideoCaps folder. For example, assume the user uploaded
CarCrash.avi to ZoozleTV. First the file will be saved at /upload/CarCrash.avi (UploadPorgress
page). Afterwards (Upload page) the video image will be created, and the user will be asked to
enter the video’s details. After the user submits the video’s details, the video and image details
will be saved in the sol tables. Assume that the VideoID of CarCrash is 99. Now, ZoozleTV will
move /Upload/CarCrash.avi to /Videos/99.avi and the image will save in /VideoCaps/99.jpg.
This way, ZoozleTV will insure no conflicts of file names in the file system.
Main page
The main page is the page the user will see when he 1st enters into the ZoozleTV web site. The
page shows a list of all videos on the site sorted by upload date, number of views, rating and
finally name. This page relies heavily on Ajax, and allows sorting the list by each of the
parameters mentions above, without a postback.
When clicking on a video, the video will start to play in the player frame (which also can be
moved), and a table with the details of the video will appear as well. The video player will
provide the option to rate the video (once per video per session) , share the video with a friend,
and get related videos to this video.
The video details tables will also provide the option to find more users from the same user, or
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
same category, and also click on each one of the video’s tags, and actually performs a tag search
on the selected tag.
User page
The user page has the same functionality as the main page; the only difference is that this page
is used to display videos by a specific user only.
Results page
The results page is used to display the results of the search that was performed (all 3 types of
search). In all other aspects, it has the same functionality as the main page.
Category page
The category page has the same functionality as the main page; the only difference is that this
page is used to display videos by a specific category only. It also allows choosing different
categories and seeing the best rated videos of that category.
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
Technologies
SQL

Full text search – as described before, it is used for Zoozle-TV's text search.

Store procedures –The interface with C# is done mostly with Store procedures.

Scalar valued functions
Website
The website is fully built in ASP 2.0. It uses the following features:

Embed – The video playing technology is using ASP.NET Embed. Embed allows to play in
a web page any video which can be played on the host's media player.

Ajax – ZoozleTV is build mostly with Ajax.

Flash – The upload progress bar is done with flash.
Detailed description of interesting components
In this section we will described some of the components used in a more detailed manner. We
will explain how they work and why were they chosen.
Video List
Overview
One of the main components that is used in the Zoozle-TV web site is the table that shows a list
of videos. This table is used to display new videos, searched videos, videos according to
categories, etc. This table uses a .ASP 2.0 called GridView. From MSDN:
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
GridView Class
Displays the values of a data source in a table where each column represents a field and each row
represents a record. The GridView control allows you to select, sort, and edit these items.
Namespace: System.Web.UI.WebControls
Assembly: System.Web (in system.web.dll)
Why was it chosen
The GridView was chosen for several reasons:
1. This is a standard component for displaying data to the user in a .asp web page.
2. It gives many ‘free’ functionality such as paging, sorting, etc.
3. It inherently supports the use of business object as a data source – so it fits right in into
our design.
Additional Features
In order to make the web site Ajax was used. Ajax enables us to respond to user inputs and bring
fresh data without creating a postback on the client’s machine. We wrapped the GridView with
an Ajax component called ‘UpdatePanel’. Taken from MSDN:
ASP.NET UpdatePanel controls enable you to build rich, client-centric Web applications. By
using UpdatePanel controls, you can refresh selected parts of the page instead of refreshing
the whole page with a postback. This is referred to as performing a partial-page update. A
Web page that contains a ScriptManager control and one or more UpdatePanel controls can
automatically participate in partial-page updates, without custom client script.
So, by using the UpdatePanel control and wrapping it around the GridView, we were able to
handle postbacks (such as when sorting the data in the grid or using the paging feature) in a
manner which elimates postbacks from the user’s end, and result in a highly responsive and
dynamic site. The UpdatePanel control was used in a lot of other scenarios in the web site – as
often as possible.
Upload Video
Overview
The ability to upload a file is essential for a web site of the kind of Zoozle-TV. There are some
standard controls in .ASP 2.0 for handling file uploads, like FileUpload control, but unfortunately,
this control does not have progress indication. We really wanted the user will have the ability to
view the progress of the uploaded file, especially in a case of a large upload. For this we chose
the ‘FlashUpload’ control, which is a free source flash control for uploading files. From the
developers site:
It is difficult to find a decent upload control that handles large files, shows a
progress bar, and still works in a medium-trust hosting environment. The problem
with these controls is medium-trust does not allow Reflection. But this does not
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
mean that we are out of luck. One of the problems these controls strive to overcome
is the server running out of memory when large files are uploaded by streaming the
uploaded file to disk. But the HttpPostedFile class description states that "By
default, all requests, including form fields and uploaded files, larger than 256 KB
are buffered to disk, rather than held in server memory." So, we don't have to
worry about this problem. The other issue is feedback to the user by way of progress
bar. Enter Flash's fileReference API, which allows you to upload a file from
Flash, and also keep track of it. And FileReferenceList which allows the user to
select multiple files.
More information about this control can be found here.
Why was it chosen
The ‘FlashUpload’ control was used for the following reasons:
1. It has a functional progress bar, so it enables the user to view the progress of the
upload.
2. Easy to use features, can be dragged onto the web page.
3. The most important part: it’s free source! Other such controls cost money.
Creating Previews of Videos
Overview
The creation of preview images of the uploaded videos is imperative for a web site of ZoozleTV’s nature. When displaying the videos for the user to choose from, the preview image is an
important parameter on deciding which video to choose. We searched for a class of dynamic
library to create such preview images from videos and could find one with a simple interface.
Finally, we found a command line tool which can do exactly that and support many formats of
videos and images. The tool name is ffmpeg.exe. From the developer’s site:
FFmpeg is a complete solution to record, convert and stream audio and video. It
includes libavcodec, the leading audio/video codec library. FFmpeg is developed
under Linux, but it can compiled under most operating systems, including
Windows.
The project is made of several components:




ffmpeg
is a command line tool to convert one video file format to another. It
also supports grabbing and encoding in real time from a TV card.
ffserver is an HTTP (RTSP is being developped) multimedia streaming
server for live broadcasts. Time shifting of live broadcast is also supported.
ffplay is a simple media player based on SDL and on the FFmpeg libraries.
libavcodec is a library containing all the FFmpeg audio/video encoders and
decoders. Most codecs were developped from scratch to ensure best
performances and high code reusability.
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV

libavformat
is a library containing parsers and generators for all common
audio/video formats.
More information can be found here.
The code for creating preview images in Zoozle-TV:
try
{
Process p = new Process();
p.StartInfo.UseShellExecute = false;
p.StartInfo.CreateNoWindow = true;
p.StartInfo.RedirectStandardOutput = true;
p.StartInfo.RedirectStandardError = true;
p.StartInfo.FileName =
Path.Combine(Server.MapPath("ffmpeg/"),"ffmpeg.exe");
p.StartInfo.WindowStyle = ProcessWindowStyle.Hidden;
string args = "-i \"video_input\" -ss 00:00:10 -vframes 1 y -s 230x160 \"image_output%d.jpg\"";
args = args.Replace("video_input", srcVideo);
args = args.Replace("image_output",
Path.Combine(Server.MapPath("videoCaps/"),dstImage));
p.StartInfo.Arguments = args;
p.Start();
//
StreamReader myStreamReader = p.StandardError;
p.WaitForExit();
}
catch (Exception ex)
{
Response.Redirect("Error.aspx?msg=" +
Server.UrlEncode("Error. Could not create image from
video:"+ex.Message));
}
Some words on the code:
Most of the code is just the standard method for executing programs in C#. We create an object
of type process, and we supply it the arguments, which tell it what to execute. In this case we
run the following command:
ffmpeg.exe -i "video_input" -ss 00:00:10 -vframes 1 -y -s 230x160 "image_output%d.jpg";
-i – the input video to create a preview for
-ss – the frame number to capture
-vframes – number of frames. We use just 1.
-s – size of the output image.
The default output is in jpg format.
Why was it chosen
The ffmpeg tool was chosen for the following reasons:
1. Very simple to use – just a few simple flags to this command line tool.
2. Supports many different (if not all) video formats and output image formats.
3. It is free source!
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
1. Deployment
The next section contains information regarding the deployment of the Zoozle-TV system. It
relates both to deployment in production environment and also partial deployment used only
for additional development and debugging.
Requirements for deployment
 Pc with windows XP\Vista\Windows server operation system installed.
 .NET 2.0 (or better) framework installed. You can find it here with installation
instructions. This is also installed by default when installing VS 2005.
 ASP.NET 2.0 AJAX Extensions 1.0 and ASP.NET AJAX Control Toolkit (This is required only
for developers). You can get it here with installation instructions.
 VS 2005 – This is required only for developers. From within VS 2005 you will be able to
run the website without the need of a dedicated web server.
 SQL Server 2005. SQL Server 2000 may work but was not tested. You need to enable
full-text-indexing on the server. You can find instruction for this here.
 Web server – with IIS 6.0 or better installed. This is needed only for deployment for
production. Developers can use VS 2005 to simulate a web server. You can find the IIS
6.0 with installation instruction here.
Steps that need to be taken
1. Install all of the above software components.
2. download the Zoozle-TV system files (can be found in the Zoozle-TV website) to your
computer:
a. If you’re deploying the system on a dedicated web server, create a new virtual
directory and copy the system files there.
b. Under VS 2005 this is not needed.
3. Setup the SQL server (as mentioned before full-text-index must be enabled):
a. Under the Zoozle-TV directory you will find a directory named ‘SQL’.
b. Create a new database named videoBlog in the server.
c. Execute the SQL script. This will create all needed tables and stored procedures.
4. Configure the system
a. Under the root directory of the system you will find the file ‘web.config’.
b. Open it and search for the following line:
<add key="ConnectionString" value="Data Source=RONSUPERCPU;Initial Catalog=videoBlog;Integrated
Security=True"/>
c. Edit the ‘value’ to match the connection string of your SQL server.
5. If running under development mode, use the page ‘populateDB.aspx’ to populate the
database with test data (videos, user, etc) in order to test and use the system.
6. If you running the web site under VS 2005, open the web site and run the page
‘main.aspx’. This will give you access to the entire system. If you’re using a dedicated
web server, use a browser to access the main page of the system.
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
More information also appears on the Zoozle-TV web site.
For any question and problems you may also contact ron.shalev@gmail.com or
ronrais@gmail.com .
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
User Guide
ZoozleTV is a web site which is built in a user friendly way.
We will go over the web pages and explain how to use each one.
Main web page
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
On the left side of the window you can see the list of videos rated by "most views". By clicking
on the one of the column's heading (Video Name, rating, date added…) you will be able to sort
the videos according to the clicked heading.
To start playing a video just click on the row the video appears in and it will start playing. In
addition you will see its details on the right side of the page. You'll have 3 links in the details
table:
1. Uploader – Left click on it will give you "more videos from the same user"
2. Category – Left click on it will give you "more videos from the same Category"
3. Tags - Left click on it will give you "more videos from the same tag"
You can rank the video while it is being played by clicking on the amount of stars u want to rank
the video with.
In addition you can share the video that is being played with your friends by clicking "Share
Video" in the bottom of the played video. If you are not signed it to the page, you will be
directed to a login page prior to sharing the video.
Register webpage
Just enter your personal details, click submit and you are registered!
Your username and password will be sent to you by email.
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
Login webpage
Just enter your username and password (check "Remember me next time" if you want to be
remembered) and click Log In. Surprisingly you will be logged in afterwards.
UploadProgress webpage
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
Just click the browse button to in order to find the video you want to upload. Click the Upload
button and wait until your video is finished being uploaded.
Upload webpage
Enter the details of your video, click “Save Video's Details” button and your video can be played
by ZoozleTV’s millions of users.
Created By Ron Rais & Ron Shalev
Jun. 05,
2007
ZoozleTV
Share Video with Friend
Just fill out the “To” and the Message textboxes, click “Send” and your friends will get a
mail with a link to the video you wanted to share!
We hope you'll enjoy ZoozleTV!
Created By Ron Rais & Ron Shalev