How to show Images from a video as preview for playlist

Question

You guys Have seen Youtube right. There while you are watching a video, You will also get related videos preview alongwith link. So how we can get it from video itself.. Is it possible to do so.. I am able to get the url from database and display it.. and when the link is clicked it will be played in a jquery player.. So before that a preview of that or you can say playlist of that will be available for user.

I have updated my code with a link I found.. But still I am not able to get the Image from Video.. Is there anything wrong in my code.. Please correct me if I am wrong..

Below is my front end code:

<form id="form1" runat="server">
    <div id="examples" runat="server" style="height:100%;width:100%">
        <div id="vidhead">Latest Videos</div>

    </div>

    </form>

and I am adding all my video links from backend on page load as shown below:

   try
    {
        con.Open();
        com = new SqlCommand("Select videourl, videoname from video order by [vid] desc",con);
        DbDataReader dr = com.ExecuteReader();
        DataTable dt = new DataTable();

        if (dr.HasRows)
        {

            int i = 0;
            dt.Load(dr);
            int rows = dt.Rows.Count;


            for (i = 0; i < rows; i++)
            {
                HtmlGenericControl d = new HtmlGenericControl("div");
                HtmlGenericControl s = new HtmlGenericControl("span");
                string[] link = new string[rows];
                string[] name = new string[rows];                    

                d.Attributes.Add("class", "plst");
                s.Attributes.Add("class", "text");
                link[i] = dt.Rows[i]["videourl"].ToString();
                name[i] = dt.Rows[i]["videoname"].ToString();
                string videothumb = link[i];
                string svthto="**Path to save Image**";
                string imgpath=GetVideoThumbnail(videothumb, svthto, 30);

                sb.Append("<a id=" + "\"a" + i + "\"" + " href=" + "\"" + link[i] + "\"" + " class=" + "\"links\"" + ">" + name[i] + "</a>");
                s.InnerHtml = sb.ToString();
                d.Controls.Add(s);
                examples.Controls.Add(d);
                sb.Clear();


            }
        }


    }
    catch(Exception ex)
    {
        ex.Message.ToString();
    }

public string GetVideoThumbnail(string path, string saveThumbnailTo, int seconds)
{
    string parameters = string.Format("-ss {0} -i {1} -f image2 -vframes 1 -y {2}", seconds, path, saveThumbnailTo);
    string pathToConvertor = "C:\\Program Files\\ffmpeg\\ffmpeg.exe";
    var processInfo = new ProcessStartInfo();
    processInfo.FileName = pathToConvertor;
    processInfo.Arguments = parameters;
    processInfo.CreateNoWindow = true;
    processInfo.UseShellExecute = false;

    File.Delete(saveThumbnailTo);

    using (var process = new Process())
    {
        process.StartInfo = processInfo;
        process.Start();
        process.WaitForExit();
    }

    if (File.Exists(saveThumbnailTo))
        return saveThumbnailTo;
    else
        return "File not Found";
}

and here is the image of what I am getting until now:

Please note: I am not concentrating on you tube videos. I am questioning regarding the videos which I store in server side folder. So if there is any jquery technique or any sort of technique to do this then please let me know.:)

Answer 1

Yes, it's possible to do what you're trying to do. First, you'll need to parse out the ID of the video from the URL. For example, take this video (first YouTube video that came up when searching stackoveflow, FYI) URL: http://www.youtube.com/watch?v=zsYjsgm4Psg. The video ID of that is zsYjsgm4Psg. Quoting @Asaph from this post,

Each YouTube video has 4 generated images. They are predictably formatted as follows:

    http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
    http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
    http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
    http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

@Asaph from the linked post provides more information about the different images that are available for a video. For now, suffice it to know that 1.jpg is one of the thumbnails for the video. Using the video ID from above, we can build up a URL for a thumbnail as such

You're going to need an image on the client side obviously, and you'll need to set that image element's source to the thumbnail URL you generate as shown above.

Answer 2

I dont know if you can pull this out using the magic of html5 and JavaScript these days but the way I traditionally know of achieving video manipulation on the server side is to use a popular command line video conversion utility call ffmpeg.

It can be downloaded at http://www.ffmpeg.org/.

With a quick search I found this forum post which contained the following snippet of code:

string videothumb = uniquefilename + fileExt;
Process p;
ProcessStartInfo info = new ProcessStartInfo();
info.FileName = "D:\\web\\upload\\ffmpeg.exe";
info.WindowStyle = ProcessWindowStyle.Hidden;
info.Arguments = " -i " + "D:\\web\\upload\\files\\" + videothumb + " -vframes 25 -f image2 -vcodec mjpeg " + "D:\\web\\upload\\thumbnails\\" + uniquefilename + "%d.jpg";
p = Process.Start(info);
while (!p.HasExited) { Thread.Sleep(10); }

Now that doesn't seem like the best piece of code I've ever seen but it should get you started.

Further down the linked thread they also solve how to control which thumbnails are generated.

Answer 3

First of all I would like to thank @rtpHarry who introduced me to ffmpeg.. otherwise I wouldn't come to know about how to achieve this.. This might not be the only way.. But this was good way for me.. :) Thanks @rtpHarry.. +50 for that... :)

Well after a long search I have come up with this solution and it looks cool and fine now and this is what I was expecting.. :)

This is what I do in backend page load event.

con.Open();
        com = new SqlCommand("Select * from video order by [vid] desc", con);
        string thumbname = "";
        string newthumb = "";
        string newpath = "";
        reader = com.ExecuteReader();
        if (reader.HasRows)
        {
            dt.Load(reader);
            int rows = dt.Rows.Count;
            int i = 0;

            for (i = 0; i < rows; i++)
            {
                int[] id = new int[rows];
                string[] link=new string[rows];
                string[] nid = new string[rows];

                id[i] = Convert.ToInt32(dt.Rows[i]["vid"].ToString());
                link[i] = dt.Rows[i]["videourl"].ToString();
                nid[i]=id[i].ToString();

                thumbname = Server.MapPath("~//Images//Video_Thumbs//") + nid[i] + ".jpg";
                newthumb = nid[i] + ".jpg";
                string link1 = Server.MapPath("~//Videos//") + link[i];
                string param = String.Format("-ss {0} -i \"" + link1 + "\" -s 150*120  -vframes 1 -f image2 -vcodec mjpeg \"" + thumbname + "\"",20);
                Process p = new Process();
                p.StartInfo.Arguments = param;
                p.StartInfo.FileName = Server.MapPath("~\\ffmpeg\\ffmpeg.exe");
                p.StartInfo.CreateNoWindow = true;
                p.StartInfo.UseShellExecute = false;
                p.Start();

                newpath="Images//Video_Thumbs//"+newthumb.ToString();
                com1 = new SqlCommand("update video set vidthumb='" + newpath + "' where vid=" + id[i] + "", con);
                com1.ExecuteNonQuery();
            }
        }
        con.Close();

As of now I have not designed the fileupload part for the videos so I have written this code in page load. So when ever the page loads the videos from the table "Video" will be retrieved one by one and a frame at 20sec time will be captured and saved in a specific folder and also in table "Video". Actually, the problem was, it was not recognizing the Server.Mappath without "~" sign before the path. Now its working well and fine and here is the image of what I was expecting... :)

If anyone visits checks this question and answer and if anyone has some doubt then please comment here.. It will be my pleasure to help you people... and Great thanks to ffmpeg.. :)