HOW TO CREATE VIDEO/PICTURE GALLERY CATEGORY WISE

SHOW YOU TUBE VIDEOS CATEGORY WISE ON YOUR WEBSITE

Its quit simple and easy if we look on common concepts of  asp.net and say programming rather than going for heavy classes/concepts or using external tools.we will here create a video gallery category wise and same concept can be applied on picture gallery .I am taking video from you tube directy and showing them on my website. So lets see how to achieve this:

DATABASE TABLE:

You required a table to store the information for video –

CREATE TABLE [dbo].[VideoGallery](

                [ID] [numeric](18, 0) IDENTITY(1,1) NOT NULL,

                [Title] [nvarchar](max) NOT NULL,

                [EmbeddedCode] [nvarchar](max) NOT NULL,

                [Width] [int] NOT NULL,

                [Height] [int] NOT NULL,

                [ImagePath] [varchar](250) NOT NULL,

                [Inactive] [bit] NULL,

                [DateFrom] [datetime] NULL,

                [category] [nvarchar](50) NULL

)

Here EmbeddedCode is used as an excelllent feature from you tube side to store the code that provide the video from youtybe to your website without been redirected.Just you need to copy the code from the video page(you page) and insert into db.

Code:

Step 1.

Now you need a script/code to display the video on your page...so dont worry here we go:...................................

<script type="text/javascript">

    function PlayVideo(videoCode, width, height) {

        //if a video is playing, close it first

        var VideoDiv = document.getElementById('video-div');

        if (VideoDiv != null) {

            RemoveDiv();

        }

        //play a new video

        CreateVideoDiv('video-div', 'video-div', videoCode, width, height);

        CreateCloseDiv("close-div", "close-div", "<a href=# onclick=RemoveDiv();><img src=\"images/close.jpg\" width=\"16\" height=\"16\" border=\"0\"/></a>", width, height, 16, 16);

    }

    function CreateVideoDiv(id, className, contentToDisplay, width, height) {

        //create a div and center it inside the browser window

        var NewDiv = CreateDiv(id, className, contentToDisplay, width, height);

        NewDiv.style.marginLeft = -(parseInt(width) / 2) + "px";

        NewDiv.style.marginTop = -(parseInt(height) / 2) + "px";

    }

    function CreateCloseDiv(id, className, contentToDisplay, videoWidth, videoHeight, closeImageWidth, closeImageHeight) {

        //place the "close" image at the top right corner of the video div

        var NewDiv = CreateDiv(id, className, contentToDisplay, closeImageWidth, closeImageHeight);

        NewDiv.style.marginLeft = (parseFloat(videoWidth) / 2) - parseFloat(closeImageWidth) * 1.5 + "px";

        NewDiv.style.marginTop = -(parseFloat(videoHeight) / 2) + parseFloat(closeImageHeight) / 2 + "px";

    }

    function CreateDiv(id, className, contentToDisplay, width, height) {

        var NewDiv = document.createElement("div");

        NewDiv.id = id;

        NewDiv.className = className;

        NewDiv.innerHTML = contentToDisplay;

        NewDiv.style.position = "absolute";

        NewDiv.style.width = width + "px";

        NewDiv.style.height = height + "px";

        NewDiv.style.top = "50%";

        NewDiv.style.left = "50%";

        NewDiv.style.display = "block";

        document.body.appendChild(NewDiv);

        return NewDiv;

    }

    function RemoveDiv() {

        var mydiv = document.getElementById("video-div");

        document.body.removeChild(mydiv);

        var mydiv = document.getElementById("close-div");

        document.body.removeChild(mydiv);

    }

</script>

<img src=\"images/close.jpg\" width=\"16\" height=\"16\" border=\"0\"/></a>", width, height, 16, 16) is needed to close the video been opened .so download any image from google and give the path in img src.

Step 2.

Design part:

It depends on you how you want to show the content I have done it like this......like it or not.(oh just joking)

<div id="scroll" style="overflow:scroll; height:690px;width:650px">

    <div id="outlinebox">    

        <div id="header">

            <asp:Label ID="Label1" runat="server" Text="WELCOME TO MY VIDEO GALLERY"

                BorderColor="#003300" BorderStyle="Solid" Font-Bold="True"

                Font-Italic="True" Font-Size="Medium"

                ForeColor="#003300" Width="648px"></asp:Label></div>

        <div id="content">

            <p style="height: 73px">

            <asp:Label ID="Label3" runat="server" Text="TYPE 1 RELATED VIDEOS"

                    Font-Bold="True" Font-Italic="True" Font-Size="Medium" ForeColor="#6600CC" ></asp:Label>

             <br />

            <asp:DataList ID="dlVideoLinks" runat="server" RepeatDirection="Horizontal"

                    RepeatLayout="Flow" Height="25%" Width="25%">

            <ItemTemplate >

              <a href="#" onclick="PlayVideo('<%# BuildVideoCode((string)Eval("EmbeddedCode")) %>', <%# Eval("Width") %>, <%#Eval("Height") %>);"><%#DisplayImage((string)Eval("ImagePath"), (string)Eval("Title")) %></a>

            </ItemTemplate>

            </asp:DataList>

        </div>

       <p>;</p>

     

       <br />

         <div id="TYPE 2">

            <p style="height: 73px">

              <asp:Label ID="Label2" runat="server" Text=" TYPE 2 RELATED VIDEOS"

                    Font-Bold="True" Font-Italic="True" Font-Size="Medium" ForeColor="#6600CC" ></asp:Label>

              <br />

            <asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal"

                    RepeatLayout="Flow" Height="25%" Width="25%">

            <ItemTemplate >

              <a href="#" onclick="PlayVideo('<%# BuildVideoCode((string)Eval("EmbeddedCode")) %>', <%# Eval("Width") %>, <%#Eval("Height") %>);"><%#DisplayImage((string)Eval("ImagePath"), (string)Eval("Title")) %></a>

            </ItemTemplate>

            </asp:DataList>

        </div>

       <p>;</p>

       <br />

        <div id=" TYPE 3">

            <p style="height: 73px">

              <asp:Label ID="Label4" runat="server" Text=" TYPE 3 RELATED VIDEOS"

                    Font-Bold="True" Font-Italic="True" Font-Size="Medium" ForeColor="#6600CC" ></asp:Label>

              <br />

            <asp:DataList ID="DataList2" runat="server" RepeatDirection="Horizontal"

                    RepeatLayout="Flow" Height="25%" Width="25%">

            <ItemTemplate >

              <a href="#" onclick="PlayVideo('<%# BuildVideoCode((string)Eval("EmbeddedCode")) %>', <%# Eval("Width") %>, <%#Eval("Height") %>);"><%#DisplayImage((string)Eval("ImagePath"), (string)Eval("Title")) %></a>

            </ItemTemplate>

            </asp:DataList>

        </div>

         <p>;</p>

         <br />

        <div id=" TYPE 4">

            <p style="height: 73px">

              <asp:Label ID="Label6" runat="server" Text=" TYPE 4 VIDEOS"

                    Font-Bold="True" Font-Italic="True" Font-Size="Medium" ForeColor="#6600CC" ></asp:Label>

              <br />

            <asp:DataList ID="DataList3" runat="server" RepeatDirection="Horizontal"

                    RepeatLayout="Flow" Height="25%" Width="25%">

            <ItemTemplate >

              <a href="#" onclick="PlayVideo('<%# BuildVideoCode((string)Eval("EmbeddedCode")) %>', <%# Eval("Width") %>, <%#Eval("Height") %>);"><%#DisplayImage((string)Eval("ImagePath"), (string)Eval("Title")) %></a>

            </ItemTemplate>

            </asp:DataList>

        </div>

         <p>;</p>

      

           </div>

           </div>

STEP 3:

Now comes the amalgating the datalist with the database

//define your connection

protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbconnection"].ConnectionString))

            {

                con.Open();

// this is the way to excute multiple quires in sql

                string query = "select * from videogallery where inactive=1 and category='TYPE 1';select * from videogallery where inactive=1 and category='TYPE 2;select * from videogallery where inactive=1 and category='TYPE 3;;select * from videogallery where inactive=1 and category='TYPE 4";

                SqlCommand cmd = new SqlCommand(query, con);

                //  SqlCommand cmd1 = new SqlCommand(query1, con);

                SqlDataAdapter da = new SqlDataAdapter(cmd);

                // SqlDataAdapter da1 = new SqlDataAdapter(cmd1);

                DataSet tbl = new DataSet("VideoData");

                da.Fill(tbl);

                if (tbl.Tables[0] != null)

                {

                    if (tbl.Tables[0].Rows.Count > 0)

                    {

                        foreach (DataRow details in tbl.Tables[0].Rows)

                        {

                            string category = details["category"].ToString();

                            dlVideoLinks.DataSource = tbl;

                            dlVideoLinks.DataBind();

                        }

                    }

                }

                if (tbl.Tables[1] != null)

                {

                    if (tbl.Tables[1].Rows.Count > 0)

                    {

                        foreach (DataRow details in tbl.Tables[1].Rows)

                        {

                              DataList1.DataSource = tbl.Tables[1];

                            DataList1.DataBind();

                        }

                    }

                }

                if (tbl.Tables[2] != null)

                {

                    if (tbl.Tables[2].Rows.Count > 0)

                    {

                        foreach (DataRow details in tbl.Tables[2].Rows)

                        {

                            DataList2.DataSource = tbl.Tables[2];

                            DataList2.DataBind();

                        }

                    }

                }

                if (tbl.Tables[3] != null)

                {

                    if (tbl.Tables[3].Rows.Count > 0)

                    {

                        foreach (DataRow details in tbl.Tables[3].Rows)

                        {

                            DataList3.DataSource = tbl.Tables[3];

                            DataList3.DataBind();

                        }

                    }

                }

            }

        }

    }

    public string BuildVideoCode(string embeddedCode)

    {

        //add autoplay=1 and wmode=transparent, replace bouble quote with html equivalent

        return embeddedCode.Replace("fs=1", "fs=1&autoplay=1")

                    .Replace("<param name=\"allowFullScreen\" value=\"true\"></param>", "<param name=\"allowFullScreen\" value=\"true\"></param><param name=\"wmode\" value=\"transparent\"></param>")

                    .Replace("type=\"application/x-shockwave-flash\"", "type=\"application/x-shockwave-flash\" wmode=\"transparent\"")

                    .Replace("\"", "&quot;");

       

    }

    public string DisplayImage(string imgPath, string title)

    {

        //build the image html code which is used for video link

        return "<img src=\"images/" + imgPath

                    + "\" width=\"75\" height=\"60\" border=\"0\" title=\""

                    + title + "\"/>";

    }

SO ITS DONE .......

Now you have to copy hte emmbedded code from you tube and done lets see how to upload it in database.

I have created a video upload page also so chek it out:::

Step 4.

VIDEO UPLOAD PAGE

    <asp:Label ID="Label1" runat="server" Text="ADD TITLE"></asp:Label>

;

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

    <br />

    <br />

    <br />

    <asp:Label ID="Label2" runat="server" Text="EMBEDDED CODE :"></asp:Label>

    <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine"></asp:TextBox>

    <br />

    <br />

    <br />

    <asp:Label ID="Label3" runat="server" Text="Thumnail Image :"></asp:Label>

    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

    <br />

    <br />

    <br />

    <asp:Label ID="Label4" runat="server" Text="Category"></asp:Label>

;

//this textbox can be drop down also with all the predefined category ..i,e in this code we have TYPE 1,TYPE2..etc.

    <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>

    <br />

    <br />

    <br />

    <br />

    <asp:Button ID="Button1" runat="server" BackColor="#99FF33"

        onclick="Button1_Click" Text="ADD VIDEO" Width="115px" />

    <br />

Code page::

DBAccess obj1 = new DBAccess();

        string dt =(DateTime.Now.Date.ToString("dd-MMM-yyyy"));

     string Success= obj1.Execute("insert into videogallery values('" + TextBox1.Text + "','" + TextBox2.Text + "',480,385,'" + TextBox3.Text + "',1,'"+dt+"','"+TextBox4.Text+"')");

     if (Success == "Success")

     {

         Response.Write("<script>alert('Video has been successfully added!!!!') </Script>");

     }

     else {

         Response.Write("<script>alert('Video cannot be uploaded error!!!!') </Script>");

NOTE*=480 and 385 are the width and height of the video that is going to be displayed on your site .I  kept it fixed for all video..and the choice is yours..

EG:

To GET THE EMMBEDED CODE FROM YOU TUBE VIDEO :

1.go to share optoin below video link.

2.go to Èmbed option and there you will find your code so just copy it and paste in in nthe textbox for embedded code.

·         NOTE:  Show suggested videos when the video finishes

this need to be removed for more suggestoin

Share this  video  Embed    Email

<iframe width="560" height="315" src="//www.youtube.com/embed/3AYoipyqOkQ?rel=0" frameborder="0" allowfullscreen></iframe>

RUNNING EXAMPLE:
VIEW RUNNING EXAMPLE ON http://ksndmc.org/VideoGallery.aspx

So JUST COPY AND (!!!!UNDERSTAND.......) AND GET AMAZED ON YOUR INTELLIGENCE

IF ANY ERROR OR SUGGESTION!! ,ARE ALWAYS WELCOME....................................................................

THANKS FOR BEARING..............................................................................................................................