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

ashish007
 
on Mar 29, 2021 11:34 PM
Sample_829950.zip
2222 Views

code work using html all photo src defined by default.

But this code using repeater and display photo and video code not work. slider not play.

Please check

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jquery.slideshow.js Demo Page</title>
        <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
        <link href="demo.css" type="text/css" rel="stylesheet" />
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <link href="dist/jquery-slideshow.css" type="text/css" rel="stylesheet" />
        <script src="dist/jquery.slideshow.js" type="text/javascript"></script>
    </head>
    <body>    
    <h1 style="margin-top:150px; text-align:center; color:#fff;">jquery.slideshow.js Demo Page</h1>
        <div id="holder">
            <div id="SlideShow">
                <!-- Slide Images -->
                <img src="20171101_110102.jpg" class="slideobject" title="#slide1"/>
                <img src="20171101_110105.jpg" class="slideobject" />
                <img src="20171101_112636.jpg" class="slideobject" />
                <img src="20171101_112713.jpg" class="slideobject" />
                <img src="20171101_112745.jpg" class="slideobject" />
                <img src="20171101_112754.jpg" class="slideobject" />
                <img src="20171101_112713.jpg" class="slideobject" />
                <div class="slideobject">                
                    <iframe width="100%" height="100%" src="http://www.youtube.com/embed/NAIIQvhKCuQ" frameborder="0" allowfullscreen></iframe>
                </div>
                <!-- Descriptions for Slides -->
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function(){
                //Load the SlideShow
                $('#SlideShow').SlideShow({
                  slideDuration: 8000,
                  transSpeed: 300,
                  loop: true,
                  infobar: true
                });
            });
        </script> 
    </body>
</html>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Apr 02, 2021 08:17 AM
on Apr 03, 2021 03:07 AM

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