BUFFOON SACHIN
Are you looking for a straightforward and free way to play your video files without needing to install extra software? What if I told you that you can create your very own video player using just a bit of HTML and JavaScript? It’s easier than you might think! In this blog post, I'll guide you through setting up a simple video player right in your web browser. No coding experience required—just copy, paste, and play!
Why Use a Custom Video Player?
Before we dive into the code, let's discuss why you might want to use a custom video player:
No Installation Needed: Unlike traditional video player software, this solution runs directly in your web browser. No need to download or install anything.
Free and Simple: It’s completely free and incredibly easy to set up. If you have a web browser, you're all set.
Quick Access: With a custom video player, you can access and play videos quickly without navigating through complex software interfaces.
How to Set Up Your Own Video Player
Follow these simple steps to create and use your own video player:
Open Your Text Editor: Use any text editor like Notepad (Windows) or TextEdit (Mac). You can also use a code editor like VSCode if you have one.
Copy the Code: Paste the following code into your text editor.
Save the File: Name the file index.html or any name you like, but ensure it ends with .html.
Open the File: Double-click the saved HTML file to open it in your web browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Player</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(to right, #e0e0e0, #ffffff); /* Subtle gradient background */
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #ffffff;
padding: 20px;
border: 5px double #007bff; /* Double border effect */
border-radius: 15px; /* Rounded corners */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
max-width: 90%;
width: 800px;
}
#video {
width: 100%;
height: auto;
border: 2px solid #007bff; /* Border around the video */
border-radius: 10px; /* Rounded corners for the video */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Shadow around the video */
}
#videoInput {
display: none; /* Hide the default file input */
}
#customButton {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
width: 50%;
max-width: 400px;
text-align: center;
transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}
#customButton:hover {
background-color: #0056b3; /* Darker shade on hover */
}
</style>
</head>
<body>
<div class="container">
<video id="video" controls>
<source id="videoSource" type="video/mp4">
Your browser does not support the video tag.
</video>
<input type="file" id="videoInput" accept="video/mp4">
<button id="customButton">Choose Video</button>
</div>
<script>
const video = document.getElementById('video');
const videoInput = document.getElementById('videoInput');
const videoSource = document.getElementById('videoSource');
const customButton = document.getElementById('customButton');
customButton.addEventListener('click', function() {
videoInput.click();
});
videoInput.addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const url = URL.createObjectURL(file);
videoSource.src = url;
video.load();
}
});
</script>
</body>
</html>
If you liked this tutorial, explore our other blogs for more tech tips and simple projects. Feel free to leave a comment if you have any questions.
Thank YOU!!!
Comments
Post a Comment
Feel free to share your love or query