How to Build a Simple Video Player with PHP and MySQL

This article explains how to create a functional video player for a website using PHP and MySQL, covering database design, PHP script to fetch video data, HTML structure for playback, and CSS styling to enhance the player’s appearance.

php Courses
php Courses
php Courses
How to Build a Simple Video Player with PHP and MySQL

Video players are common on modern websites; this guide shows how to develop a simple yet practical video player using PHP.

1. Design the database – Create a MySQL database named videos with a table also called videos. The table should contain the fields id (auto‑increment primary key), title, url, and thumbnail. Insert some sample rows for demonstration.

2. Create the video player page – Add a file video_player.php. In this file connect to the database, query all records from the videos table, and loop through the result set to output the HTML for each video, including its title, thumbnail image, and a <video> element with controls.

<?php<br/>// Connect to database<br/>$conn = mysqli_connect("localhost", "root", "password", "videos");<br/><br/>// Query video information<br/>$query = "SELECT * FROM videos";<br/>$result = mysqli_query($conn, $query);<br/><br/>// Loop and output video player<br/>while ($row = mysqli_fetch_assoc($result)) {<br/>    $title = $row['title'];<br/>    $url = $row['url'];<br/>    $thumbnail = $row['thumbnail'];<br/>    echo '<br/>    <div class="video-container"><br/>        <h2>' . $title . '</h2><br/>        <img src="' . $thumbnail . '"><br/>        <video src="' . $url . '" controls></video><br/>    </div><br/>';<br/>}<br/><br/>// Close connection<br/>mysqli_close($conn);<br/>?>

3. Beautify the player – Create a stylesheet style.css with CSS rules that set the container width, margins, and make the title, image, and video fill the container.

.video-container {<br/>    width: 500px;<br/>    margin-bottom: 20px;<br/>}<br/><br/>.video-container h2 {<br/>    margin-top: 0;<br/>}<br/><br/>.video-container img {<br/>    width: 100%;<br/>}<br/><br/>.video-container video {<br/>    width: 100%;<br/>}

Finally, link the stylesheet in video_player.php with <link rel="stylesheet" href="style.css"> so the player adopts the defined styles.

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Sign in to view source
Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactadmin@besthub.devand we will review it promptly.

CSSvideo playerweb-development
php Courses
Written by

php Courses

php中文网's platform for the latest courses and technical articles, helping PHP learners advance quickly.

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.