Enhanced Interactive Video Player with
File Selection 🎥
Concepts Covered:
Custom Video Player with User File Selection
JavaScript Media API (play(), pause(), currentTime, duration, muted)
File API (URL.createObjectURL()) for playing user-selected videos
🚀 Features of this Video Player:
✅ Users can upload and play their own video files
✅ Custom Play/Pause, Seek, and Mute controls
✅ Real-time Seek Bar updates video progress
💻 Full Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Video Player</title>
<style>
body { text-align: center; font-family: Arial, sans-serif; }
video { width: 80%; max-width: 700px; display: block; margin: 20px
auto; }
input, button { margin: 10px; padding: 8px; font-size: 16px; }
input[type="range"] { width: 60%; }
</style>
</head>
<body>
<h2>Interactive Video Player</h2>
<!-- File Input for Video Upload -->
<input type="file" id="videoFile" accept="video/*">
<br>
<!-- Video Player -->
<video id="video" controls>
Your browser does not support the video tag.
</video>
<br>
<!-- Custom Controls -->
<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>
<input type="range" id="seekBar" min="0" step="1">
<button onclick="muteToggle()">Mute</button>
<script>
let video = document.getElementById("video");
let seekBar = document.getElementById("seekBar");
let videoFileInput = document.getElementById("videoFile");
// 🔹 Load User-Selected Video
videoFileInput.addEventListener("change", function(event) {
let file = event.target.files[0]; // Get selected file
if (file) {
let videoURL = URL.createObjectURL(file); // Create
temporary URL
video.src = videoURL; // Set video source
video.load(); // Load the new video
}
});
// 🔹 Update Seek Bar when video metadata is loaded
video.addEventListener("loadedmetadata", function() {
seekBar.max = video.duration; // Set seek bar range
});
// 🔹 Update Seek Bar during video playback
video.addEventListener("timeupdate", function() {
seekBar.value = video.currentTime;
});
// 🔹 Play Video
function playVideo() {
video.play();
}
// 🔹 Pause Video
function pauseVideo() {
video.pause();
}
// 🔹 Mute or Unmute Video
function muteToggle() {
video.muted = !video.muted;
}
// 🔹 Seek Video Position
seekBar.addEventListener("input", function() {
video.currentTime = seekBar.value;
});
</script>
</body>
</html>
🔍 Code Explanation (Step by Step)
1️⃣ Uploading a Video File
<input type="file" id="videoFile" accept="video/*">
This <input> allows users to select a video file from their computer.
The attribute accept="video/*" ensures only video files can be chosen.
videoFileInput.addEventListener("change", function(event) {
let file = event.target.files[0];
if (file) {
let videoURL = URL.createObjectURL(file);
video.src = videoURL;
video.load();
}
});
event.target.files[0]: Retrieves the selected file.
URL.createObjectURL(file): Generates a temporary URL for the video.
video.src = videoURL: Sets the video element to play the uploaded file.
video.load(): Reloads the video to ensure it plays properly.
2️⃣ Displaying the Video Player
<video id="video" controls>
Your browser does not support the video tag.
</video>
Displays a video player.
The controls attribute allows default browser controls (play, pause, volume).
3️⃣ Custom Play & Pause Buttons
<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>
Calls playVideo() and pauseVideo() when clicked.
function playVideo() {
video.play();
}
function pauseVideo() {
video.pause();
}
Uses JavaScript Media API (play() and pause()) to control playback.
4️⃣ Seek Bar (Scrubbing Video)
<input type="range" id="seekBar" min="0" step="1">
<input type="range"> creates a slider for seeking in the video.
video.addEventListener("loadedmetadata", function() {
seekBar.max = video.duration;
});
video.duration gives the total length of the video.
Sets the seek bar's maximum value to match the video length.
video.addEventListener("timeupdate", function() {
seekBar.value = video.currentTime;
});
Updates the seek bar as the video plays.
seekBar.addEventListener("input", function() {
video.currentTime = seekBar.value;
});
Allows users to seek by moving the slider.
Updates video.currentTime to match the slider position.
5️⃣ Mute/Unmute Button
<button onclick="muteToggle()">Mute</button>
Calls muteToggle() when clicked.
function muteToggle() {
video.muted = !video.muted;
}
Toggles video mute state using video.muted.
🎯 Summary of Features
✅ Select & Play Custom Videos
✅ Play, Pause, Seek, and Mute Controls
✅ Real-time Seek Bar for Navigation
✅ Fully Interactive User Interface
💡 Next Steps
Add Volume Control (video.volume)
Add Playback Speed Options (video.playbackRate)
Style the controls using CSS for a modern UI
This enhanced video player gives full control to users over any video they select! 🚀
