Create video slider with images from database in ASP.Net using jQuery

Hi ashish007,

Use video tag to play the video.

Check this example. Now please take its reference and correct your code.

HTML

<style type="text/css">
    body {
        font-family: Arial;
        font-size: 10pt;
    }

    #holder {
        width: 210px;
        height: 250px;
        margin: 30px auto;
        background: #111;
        border: 1px solid #555;
        --box-shadow: 0px 0px 12px #000;
        padding: 10px;
        --border-radius: 5px;
    }

    #SlideShow {
        position: relative;
        background: #222;
    }

        #SlideShow .next {
            width: 10px;
            height: 25px;
            background: url(Images/next.jpg) no-repeat;
            display: none;
            cursor: pointer;
            opacity: 0.7;
        }

        #SlideShow .previous {
            width: 42px;
            height: 42px;
            background: url(Images/previous.jpg) no-repeat;
            display: none;
            cursor: pointer;
            opacity: 0.7;
        }

        #SlideShow .desc {
            height: 30px;
            line-height: 30px;
            font-family: Arial;
            font-size: 12px;
            font-weight: bold;
            text-indent: 8px;
            background: #000;
            border-top: 1px solid #888;
            opacity: 0.8;
            color: #FFF;
            display: none;
        }

            #SlideShow .desc a {
                color: #00ccff;
                font-weight: bold;
            }

        #SlideShow .bottom-bar {
            background: #222;
            height: 28px;
        }

        #SlideShow .box-bar {
            float: left;
            margin-left: 2px;
        }

        #SlideShow .box {
            width: 8px;
            height: 8px;
            background: #CCC;
            border: 1px solid #FFF;
            margin-top: 11px;
            float: left;
            margin-right: 5px;
            cursor: pointer;
        }

        #SlideShow .boxselected {
            background: #00ccff;
            border: 1px solid #999;
        }

        #SlideShow .box:hover {
            background: #AAA;
            border: 1px solid #DDD;
        }

        #SlideShow .button {
            width: 28px;
            height: 28px;
            float: right;
            cursor: pointer;
            margin-top: 2px;
            padding: 2px;
        }

        #SlideShow .playButton {
            opacity: 0.7;
            background: url(Images/play.png) no-repeat;
            background-position: center center;
        }

        #SlideShow .pauseButton {
            opacity: 0.7;
            background: url(Images/pause.png) no-repeat;
            background-position: center center;
        }

        #SlideShow .slideobject,
        #SlideShow .caption {
            display: none;
            height: 200px !important;
            width: 200px !important;
        }

        #SlideShow .next:hover,
        #SlideShow .previous:hover,
        #SlideShow .playButton:hover,
        #SlideShow .pauseButton:hover {
            opacity: 1
        }
</style>
<link rel="stylesheet" type="text/css" href="http://www.jqueryscript.net/css/jquerysctipttop.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="Slideshow.js" type="text/javascript"></script>
<div id="holder">
    <div id="SlideShow">
        <asp:Repeater ID="rp1" runat="server" OnItemDataBound="OnItemDataBound">
            <ItemTemplate>
                <asp:Image ID="img" runat="server" ImageUrl='<%#Eval("Path") %>' CssClass="slideobject" />
                <div id="dvVideo" class="slideobject" runat="server">
                    <video width="100%" height="100%" controls autoplay muted loop>
                        <source src='<%#Eval("Path") %>' type="video/mp4">
                    </video>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#SlideShow').SlideShow({
            slideDuration: 3000,
            transSpeed: 300,
            loop: true,
            infobar: true
        });
    });
</script>

Namepasces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.IO;
using System.Web.UI.HtmlControls;

VB.Net

Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.IO
Imports System.Web.UI.HtmlControls

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        rp1.DataSource = GetData("SELECT TOP 3 Id,ImageName,path FROM tblFilePath ORDER BY Id DESC");
        rp1.DataBind();
    }
}

protected void OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        string file = ((DataRowView)e.Item.DataItem).Row["Path"].ToString();
        string extension = Path.GetExtension(file);

        Image img = e.Item.FindControl("img") as Image;
        img.Visible = extension == ".jpg" ? true : false;

        HtmlGenericControl video = e.Item.FindControl("dvVideo") as HtmlGenericControl;
        video.Visible = extension == ".mp4" ? true : false;
    }
}

private DataTable GetData(string query)
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;        
    using (SqlConnection con = new SqlConnection(conString))
    {
        SqlCommand cmd = new SqlCommand(query);
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataTable dt = new DataTable())
            {
                sda.Fill(dt);
                return dt;
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        rp1.DataSource = GetData("SELECT TOP 3 Id,ImageName,path FROM tblFilePath ORDER BY Id DESC")
        rp1.DataBind()
    End If
End Sub

Protected Sub OnItemDataBound(ByVal sender As Object, ByVal e As RepeaterItemEventArgs)
    If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
        Dim file As String = (CType(e.Item.DataItem, DataRowView)).Row("Path").ToString()
        Dim extension As String = Path.GetExtension(file)
        Dim img As Image = TryCast(e.Item.FindControl("img"), Image)
        img.Visible = If(extension = ".jpg", True, False)
        Dim video As HtmlGenericControl = TryCast(e.Item.FindControl("dvVideo"), HtmlGenericControl)
        video.Visible = If(extension = ".mp4", True, False)
    End If
End Sub

Private Function GetData(ByVal query As String) As DataTable
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(conString)
        Dim cmd As SqlCommand = New SqlCommand(query)
        Using sda As SqlDataAdapter = New SqlDataAdapter()
            cmd.Connection = con
            sda.SelectCommand = cmd
            Using dt As DataTable = New DataTable()
                sda.Fill(dt)
                Return dt
            End Using
        End Using
    End Using
End Function

Screenshot