Showing posts with label Thumbnail. Show all posts
Showing posts with label Thumbnail. Show all posts

Playing Videos like YouTube and Thumbnail Creation in ASP.Net - I

Monday, September 22, 2008
If you want to play video like youtube in your ASP.Net application what will you do? Can you able to generate thumbnail for the video programmatically? How did you play converted video?? All these are for Free of cost. No need to buy any software then how??.

This article will provide solutions for the above questions. Generally we can see some video sites like youtube. Here we can watch streaming media. But when you upload a wmv file into server and try to play it. What happen? If the video is long it will take time to play. For this reason we have to convert the video to a streaming media(like swf) so that when the page is opened automatically video playing started.

For this we have to convert the video which is uploaded by the user to swf. Then only we can able to play the video quickly. In order to convert the video we will use a software called FFMPEG. It’s open source software you can download this software from here.

Using FFMPEG we can able to generate thumbnails for the video what ever we are uploading. By using FFMPEG’s API we can perform various operations for the videos and audios.
In order to start this Application first we have to import following name spaces…


using System.IO;
using System.Diagnostics;

When User Clicks on Upload button then we have to perform following tasks.

  • Check the Format of Video
  • Convert the Video to flv format with FFMPEG
  • Generate a Thumbnail for the uploaded video
  • Delete the original video.
  • Check the Format of Video

    Here I am using Regular Expression to check the video format. I want to upload only wmv, mpeg, or avi format videos. Here is the regular expression


    <asp:RegularExpressionValidator id="req1" runat="server"

    ErrorMessage="Only wmv, avi or mpeg files are allowed!"

    ValidationExpression="^(([a-zA-Z]:)(\\{2}\w+)\$?)(\\(\w[\w].*))+(.wmv.avi.mpeg.MPEG)$"

    ControlToValidate="FileUpload1" Display="dynamic"></asp:RegularExpressionValidator>



  • Convert the Video to flv format with FFMPEG
    To Convert our video to SWF format FFMPEG need File Name, File Arguments. File Name is the name of the FFMPEG folder with full path. Arguments can be write as..
  • The general syntax is ..
    ffmpeg [[infile options][@option{-i} infile]]... {[outfile options] outfile}...


    filargs = "-i " + inputfile + " -ar 22050 " + outputfile;
    To run the FFMPEG exe we have to start a Process. This can be write as..
    Process proc;
    proc = new Process();
    proc.StartInfo.FileName = spath + "\\ffmpeg\\ffmpeg.exe";
    proc.StartInfo.Arguments = filargs;
    proc.StartInfo.UseShellExecute = false;
    proc.StartInfo.CreateNoWindow = false;
    proc.StartInfo.RedirectStandardOutput = false;
    try
    {
    proc.Start();
    }
    catch (Exception ex)
    {
    Response.Write(ex.Message);
    }
    proc.WaitForExit();
    proc.Close();


    • Generate a Thumbnail for the uploaded video

      For the thumbnail we have to provide path to where we have to save our thumbnail. Here is code for thumbnails..

  • //Create Thumbs
    string thumbpath, thumbname;
    string thumbargs;
    string thumbre;
    thumbpath = AppDomain.CurrentDomain.BaseDirectory + "Video\\Thumb\\";
    thumbname = thumbpath + withoutext + "%d" + ".jpg";
    thumbargs = "-i " + inputfile + " -vframes 1 -ss 00:00:07 -s 150x150 " + thumbname;
    Process thumbproc = new Process();
    thumbproc = new Process();
    thumbproc.StartInfo.FileName = spath + "\\ffmpeg\\ffmpeg.exe";
    thumbproc.StartInfo.Arguments = thumbargs;
    thumbproc.StartInfo.UseShellExecute = false;
    thumbproc.StartInfo.CreateNoWindow = false;
    thumbproc.StartInfo.RedirectStandardOutput = false;
    try
    {
    thumbproc.Start();
    }
    catch (Exception ex)
    {
    Response.Write(ex.Message);
    }
    thumbproc.WaitForExit();
    thumbproc.Close();


  • Delete the original video.
    Once the conversion process is completed we delete wmv file. Here is the code.
    File.Delete(inputfile);

  • Here the most important thing is “Permissions”. In order to convert the video and generate the thumbnails we have to provide all permissions to our application. Especially for the folder where your going to save the videos and thumbnails.

    If you’re using FFMPEG in Remote server then you have to give all permissions to FFMPEG folder also. Because here we are running an exe to convert the videos.

    When ever you upload videos more then 4096 KB, ASP.Net does not allow you to upload the video because It’s the Max HTTP Request size for any application. If you want change the HTTP request size you have to change the “maxRequestLength” in web.config section. Here is the complete code..


    <system.web>
    <httpRuntime
    executionTimeout="110"
    maxRequestLength="30000"
    requestLengthDiskThreshold="80"
    useFullyQualifiedRedirectUrl="false"
    minFreeThreads="8"
    minLocalRequestFreeThreads="4"
    appRequestQueueLimit="5000"
    enableKernelOutputCache="true"
    enableVersionHeader="true"
    requireRootedSaveAsPath="true"
    enable="true"
    shutdownTimeout="90"
    delayNotificationTimeout="5"
    waitChangeNotification="0"
    maxWaitChangeNotification="0"
    enableHeaderChecking="true"
    sendCacheControlHeader="true"
    apartmentThreading="false" />
    </system.web>

    Now you can able to upload videos upto 30MB.

    How to Play Video:
    Using swf player we can play the video. In the sample application you can find this player. For this player we have to give the source file name with correct path. You can find play.aspx file in source code to know more about how to play the videos.


    In Part-I, I am explained how to convert the video from one format to another format and generating thumbnails. In Part-II I am going to explain how to bind this thumbnail to Gridview or DataList dynamically from Database and how to play the videos.

    Note: In the sample I did not place the ffmpeg software due to the size.(Its around 10MB)
    You can download for here:ffmpeg.rar
    Downloadm Source Code