1#@!#!123s

: / home / markniuj / bazmeasar.com /
Filename : mp4.php
back
 <?php
        include 'config.php';

                ?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mp4 clips</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="keywords">
    <meta content="" name="description">

    <!-- Favicon -->
    <link href="img/favicon.ico" rel="icon">

    <!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@600;700&family=Ubuntu:wght@400;500&display=swap" rel="stylesheet"> 

    <!-- Icon Font Stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Libraries Stylesheet -->
    <link href="lib/animate/animate.min.css" rel="stylesheet">
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="lib/tempusdominus/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />

    <!-- Customized Bootstrap Stylesheet -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Template Stylesheet -->
    <link href="css/style.css" rel="stylesheet">


    <style>
    .shed{
        margin-top: -8px;
    }
    .space{
        padding: 20px;
        text-align: center;
    }
        .video-box {
            padding: 5px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
        }

        video {
            max-width: 100%;
            height: auto;
        }

        .download-link {
            display: inline-block;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            padding: 8px 15px;
            border-radius: 5px;
            margin-top: 10px;
            font-size: 16px;
        }

        .download-link:hover {
            background-color: #0056b3;
        }

        @media (max-width: 768px) {
            .video-box {
                margin-bottom: 20px;
            }

            .download-link {
                font-size: 14px;
                padding: 6px 12px;
            }
        }
    </style>
</head>

<body>
    
    
        <!-- Navbar Start -->
  <?php include 'include/menu.php';?>
    <!-- Navbar End -->


    <div class="space">
<h1 style="margin-top: 0;font-size: 45px;color: #001350;  text-align: center; margin-bottom: 0.5rem;   font-family: " barlow",="" sans-serif;="" font-weight:="" 700;="" line-height:="" 1.2;="" color:="" #0b2154;"="">MP4</h1>
    <h1 style="margin-top: 0;font-size: 45px;color: #066737;  text-align: center; margin-bottom: 0.5rem;   font-family: " barlow",="" sans-serif;="" font-weight:="" 700;="" line-height:="" 1.2;="" color:="" #0b2154;"="">SHORT CLIPS</h1>
</div>

    <div class="container-fluid">
        <div class="row">
            <?php
            include 'config.php';

            // Pagination setup
            $limit = 6; // Items per page
            $page = (isset($_GET['page']) && is_numeric($_GET['page'])) ? $_GET['page'] : 1;
            $start = ($page - 1) * $limit;

            // Fetching MP4 data from the database with pagination
            $sql = "SELECT * FROM mp4 ORDER BY mp4_id DESC LIMIT $start, $limit";
            $result = $conn->query($sql);

           if ($result->num_rows > 0) {
                while ($row = $result->fetch_assoc()) {
                    $videoPath = 'admin/uploads/mp4/' . $row['mp4_name'];
                    $placeholderImage = 'admin/uploads/mp4/thumbnails/' . $row['thumbnail']; // Assuming a field named 'thumbnail' for the image in your database
            ?>
                    <div class="col-lg-4">
                        <div class="video-box">
                            <video controls preload="none" poster="<?php echo $placeholderImage; ?>" class="lazy-load">
                                <source src="<?php echo $videoPath; ?>" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                             <div class="shed"><img src="img/shed.png" width=" 100%" height="24px" alt="Image"></div>
                             
                             
                             
                             
                             
                             
                            <p><?php echo $row['mp4_title']; ?> <b>Date: <?php echo $row['mp4_date']; ?> </b></p>
                            <p><?php echo $row['urdu']; ?></p>
                            <p><?php echo $row['english']; ?></p>


                            <!-- Download button -->
                            <a href="<?php echo $videoPath; ?>" download="<?php echo $row['mp4_name']; ?>" class="download-link">Download</a>
                        </div>
                    </div>
            <?php
                }
            } else {
                echo "<div class='col-md-12'><p>No MP4 videos found.</p></div>";
            }

            // Pagination links
            $sql = "SELECT COUNT(*) AS total FROM mp4";
            $result = $conn->query($sql);
            $row = $result->fetch_assoc();
            $total_pages = ceil($row["total"] / $limit);
            ?>
        </div>

        <!-- Pagination -->
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
                <?php
                $previous = $page - 1;
                $next = $page + 1;

                echo "<li class='page-item'><a class='page-link' href='?page=1'>First</a></li>";
                if ($page > 1) {
                    echo "<li class='page-item'><a class='page-link' href='?page=$previous'>Previous</a></li>";
                }

                for ($i = 1; $i <= $total_pages; $i++) {
                    echo "<li class='page-item'><a class='page-link' href='?page=$i'>$i</a></li>";
                }

                if ($page < $total_pages) {
                    echo "<li class='page-item'><a class='page-link' href='?page=$next'>Next</a></li>";
                }
                echo "<li class='page-item'><a class='page-link' href='?page=$total_pages'>Last</a></li>";
                ?>
            </ul>
        </nav>
    </div>

    <!-- Bootstrap JS and your custom JavaScript -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var videos = document.querySelectorAll(".lazy-load");

            videos.forEach(function(video) {
                video.addEventListener("click", function() {
                    if (this.paused) {
                        this.play();
                    } else {
                        this.pause();
                    }
                });
            });
        });
    </script>
    
    
    
    <!-- Footer Start -->

       <?php include 'include/footer.php';?>


    <!-- Footer End -->


    <!-- Back to Top -->
    <a href="#" class="btn btn-lg btn-primary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>

    <!-- Add Bootstrap JS and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <!-- JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="lib/wow/wow.min.js"></script>
    <script src="lib/easing/easing.min.js"></script>
    <script src="lib/waypoints/waypoints.min.js"></script>
    <script src="lib/counterup/counterup.min.js"></script>
    <script src="lib/owlcarousel/owl.carousel.min.js"></script>
    <script src="lib/tempusdominus/js/moment.min.js"></script>
    <script src="lib/tempusdominus/js/moment-timezone.min.js"></script>
    <script src="lib/tempusdominus/js/tempusdominus-bootstrap-4.min.js"></script>

    <!-- Template Javascript -->
    <script src="js/main.js"></script>
</body>

</html>