如何显示从视频图像作为预览播放列表(How to show Images from a video

2019-09-26 16:07发布

你们有看到YouTube网站。 还有当你在观看视频,您也将获得相关视频预览非常久远的链接。 那么我们如何才能从视频本身得到它..是否有可能这样做..我能够从数据库中获取的网址和显示它..和链接被点击时,它会在一个jQuery播放器中播放。所以在此之前,一个的是预览或者你可以说的是播放列表将可用于用户。

我已经更新了我的代码的链接,我发现..但我仍是无法从视频获取图像..这有什么错在我的代码。请纠正我,如果我错了..

下面是我的前端代码:

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

    </div>

    </form>

和我加入从页面加载后端我所有的视频链接,如下图所示:

   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";
}

这里就是我得到一直到现在的图像:

请注意:我不是集中在你管的视频。 我就追问我存储在服务器端的文件夹中的视频。 所以,如果有任何jQuery的技术或任何种类的技术来做到这一点,那么请让我知道。:)

Answer 1:

是的,这是可以做到你想要做什么。 首先,你需要从URL解析出视频的ID。 例如,利用这个视频(即上前搜索stackoveflow时,FYI第一YouTube视频),网址: http://www.youtube.com/watch?v=zsYjsgm4Psg 。 那视频ID是zsYjsgm4Psg 。 从报价@Asaph 这个帖子 ,

每个YouTube视频4个生成的图像。 他们预见的格式如下:

  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提供有关可用于视频不同图像的更多信息。 现在,这足以知道1.JPG是缩略图的视频之一。 从上面使用视频ID,我们可以建立一个网址给缩略图这样

你将需要在客户端的图像明显,而你需要的是图像元素的源设置为您生成如上表示的缩略图URL。



Answer 2:

我不知道如果你能成功这一点,使用HTML5和JavaScript的魔力,但这些天我历来知道在服务器端实现视频处理的方法是使用一个流行的命令行视频转换工具ffmpeg的通话。

其可以在下载http://www.ffmpeg.org/ 。

一个快速的搜索,我发现这个论坛上发帖其中包含下面的代码片段:

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); }

现在,似乎并不像我见过的代码最好的一块,但它应该让你开始。

再往下连接线也解决了如何控制生成哪个缩略图。



Answer 3:

首先我想感谢谁@rtpHarry向我介绍了FFmpeg的..不然我也不会来了解如何实现这一目标。这可能不是唯一的方式。但是,这是很好的方式,我.. :)谢谢@rtpHarry .. +50为... :)

好长时间的寻找,我想出了这个解决方案,它现在看起来很酷,细,这就是我所期待.. :)

这是我在后台页面加载事件做。

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();

截至目前我还没有专为视频文件上传的一部分,所以我已经写在页面加载此代码。 曾经在页面加载从表中的视频,所以当“视频”将通过一个检索的一个,并在20秒的时间框架将被捕获并保存在一个特定的文件夹,并在表中的“视频”。 其实,问题是,它无法识别Server.Mappath没有路径之前,“〜”符号。 现在,它的工作很好,很好,这里是我期待的形象... :)

如果有人访问检查该问题及答案,如果任何人有一些疑问,那么请在这里评论..这将是我很愿意帮助你的人......并且十分感谢ffmpeg的.. :)



文章来源: How to show Images from a video as preview for playlist