Video Uploader sample application shows how to upload movies, save them on the server, and show these movies in the gallery using a free Silverlight 2 Video Player.

Important

This demo application is just an example of Video Uploader usage. Video Uploader is a client-side control (i.e. VideoUploader.cab and iuembed.js files). All other code (both HTML/JavaScript and server pages) is not a part of Video Uploader. All actions performed on server (such as saving files to folders, deleting previously uploaded files, and others) are made by this code rather than by Video Uploader.

Keep in mind that this demo application is intended for demonstration purposes only. It is not recommended to use it in production. For real-life applications you should write your own code which takes into account its specifics.

However, you can use this demo as starter kit that illustrates how to use Video Uploader in some typical situations. Feel free to copy and modify the code from this application.

This demo application is implemented in ASP.NET C#.

Overview

This sample demonstrates how to:

  • Display thumbnails in TwoPanes layout.
  • Upload movies transcoded with user-specified settings.
  • Upload 100x100 JPEG thumbnail for each uploaded movie.
  • Redirect to the gallery page after successful upload.
Video Uploader Sample Application

Client-Side Code

All Video Uploader features which are used in this demo application can be divided in the following groups.

Upload Settings

The central setting used every time Video Uploader initiates upload is the Action property. It specifies a URL to the page that receives data uploaded by Video Uploader (movies, thumbnails, and the other additional data). We will examine server code in detail below in this article.

Another important (but optional) parameter is RedirectUrl. It specifies a URL where the user will be redirected to after upload is successfully completed. In our case it will be gallery page. This page allows users to look through the uploaded movies and playback them from the server directly.

Appearance and Behavior Settings

Although Video Uploader provides a big number of the appearance and behavior customization settings, in this demo only few of them are used. The most important of them is the PaneLayout property which specifies a layout of the control. In our case it will be TwoPanes layout, which is the easiest to use. All other appearance and behavior parameters have self-descriptive names, so it makes no sense to dwell on them.

Movie Settings

This sample sends one movie for each user-specified video file. By default, this file is transcoded with the following parameters:

  • 640x480 pixels size,
  • 750 kbps bitrate,
  • 25 fps frame rate,
  • 0 second time shift from the beginning of movie,
  • and original duration.

The code snippet below demonstrates how to configure default video transcoding settings.

JavaScript

// ...

//Configure movie settings.
vu.addParam("UploadMovie1FitMode", "Fit");
vu.addParam("UploadMovie1Width", "640");
vu.addParam("UploadMovie1Height", "480");
vu.addParam("UploadMovie1Bitrate", "750");
vu.addParam("UploadMovie1FrameRate", "25");
vu.addParam("UploadMovie1StartTime", "0");
vu.addParam("UploadMovie1Duration", "0");

// ...

All these parameters can be changed by a user through the right-side panel. Note, that the start time and movie duration can be changed only if the Crop movie check box is selected. Additionally, a user can add a watermark to the movie by selecting the Add watermark check box. The code which adds a watermark to the upload movie is the following:

JavaScript

function videoUploader_BeforeUpload(){
    var videoUploader = getVideoUploader("videoUploader");
    if (videoUploader) {
        // ... Other settings ... 
    
        //set watermark
        var watermarkCheckbox = document.getElementById("watermarkCheckbox");
        if (watermarkCheckbox && watermarkCheckbox.checked) {
            videoUploader.setUploadMovie1Watermark("ImageUrl=watermark.png;" +
                "ImageWidth=155;ImageHeight=30;Position=TopRight;OffsetX=5;OffsetY=5");
        } else {
            videoUploader.setUploadMovie1Watermark("ImageUrl='';");
        }
    }
}

// ... Omitted for brevity ...

var vu = new VideoUploaderWriter("videoUploader", 650, 600);
//... Other params and event handlers ...
vu.addEventListener("BeforeUpload", "videoUploader_BeforeUpload");    
//... Other params and event handlers ...

Thumbnail Settings

This sample uploads a single 100x100 thumbnail for each video file. To configure this thumbnail use the following code:

JavaScript

// ...

//Configure thumbnail settings.
vu.addParam("UploadThumbnail1FitMode", "Fit");
vu.addParam("UploadThumbnail1Width", "100");
vu.addParam("UploadThumbnail1Height", "100");

// ...

Server-Side Code

As Video Uploader is a pure client-side application, it can do only a half of the upload work - i.e. send files to the server. To receive files and carry out any additional operations, you should write your own code.

This sample demonstrates how to perform minimum set of actions on the server. It does three things:

  1. Saves uploaded movies into the /VideoFiles/_GUID_ folder, where _GUID_ is the session unique identifier.
  2. Saves uploaded thumbnails into the /VideoFiles/_GUID_/Thumbnails folder, where _GUID_ is the session unique identifier.
  3. Creates an XML file that describes uploaded content (dimensions of the uploaded movie and its duration).
    Note

    In real-life application it is highly recommended to use database instead of XML files to store such kind of data.

To implement this we iterate through all files in the request and perform the following actions for each of them:

  1. Get the movie and save it to the /VideoFiles/_GUID_ folder. Use the Movie1_N POST field, where N is an index of the file in the POST request.
  2. Get the thumbnail and save it to the /VideoFiles/_GUID_/Thumbnails folder. Use the Thumbnail1_N POST field, where N is an index of the file in the POST request.
  3. Write dimensions of the uploaded movie and its duration to the especially created XML file. Use the Movie1Width_N, Movie1Height_N, and Movie1Duration_N POST fields.

The index of the file in the POST request (used in the Movie1_N and Thumbnail1_N fields) is one-based. It means that if the user uploads two files, they will get Movie1_1 and Movie1_2 fields (the same is true for others XXX_N fields).

Make sure that /VideoFiles folder has enough permissions to save files to:

  • On Windows NT/2000/XP you should grant the modify permission to the Internet guest user (IUSR_<machinename>).
  • On Windows 2003 Server you should grant the modify permission to the NETWORK SERVICE group.
  • On Windows Vista and 2008 Server you should grant the modify permission to the account your site application pool is running under, Network Service by default.

Keep in mind, this code just gives some guidelines how to integrate Video Uploader with your website. It is not presumed to be used in the production environment. For brevity reasons, it intentionally omits many handy things that you may want to have, e.g. email notification, saving to specific folder, user authentication, etc. This is matter of your application rather than of Video Uploader.