Guest Mode:
BCA Student Stories & UpdatesLive
You
Day 44Advanced JavaScript & Browser APIs2.5 Hours Practical
Push to GitHub to Complete
Custom HTML5 Audio & Video Player (Media API & Real-time Progress Bar)
While modern browsers offer default native media controls via the controls attribute, commercial streaming platforms (YouTube, Netflix, Spotify) require fully customized player skins. The HTML5 Media API exposes rich methods and events that allow developers to design bespoke media interfaces with custom timelines, play buttons, and volume bars.
Interactive Learning Roadmap
Day 44 Step-by-Step Practical Flow
🎯1. What You Will Learn Today
✔Control HTML5 media elements (<video> and <audio>) programmatically with media.play() and media.pause().
✔Track playback progress in real time using the timeupdate event and duration / currentTime properties.
✔Build a custom scrubbable progress bar that allows users to seek forward and backward.
✔Implement audio volume manipulation and mute toggle buttons using media.volume and media.muted.
✔Format raw playback seconds into polished standard mm:ss digital timer strings.
Day 44 MasterclassAdvanced JavaScript & Browser APIs
Custom HTML5 Audio & Video Player (Media API & Real-time Progress Bar) — Comprehensive Practical Guide
Har concept ko visual mental models, code anatomy aur practical industry tips ke sath samjhein.
Real-World Purpose Aur Zaroorat
While modern browsers offer default native media controls via the controls attribute, commercial streaming platforms (YouTube, Netflix, Spotify) require fully customized player skins. The HTML5 Media API exposes rich methods and events that allow developers to design bespoke media interfaces with custom timelines, play buttons, and volume bars.
Playback Control: Calling media.play() returns a Promise. media.pause() halts playback without resetting currentTime.
Time Tracking: The timeupdate event fires several times per second during active playback. Calculate percentage with (currentTime / duration) * 100.
Seeking: Setting media.currentTime = newSeconds immediately jumps the media playback to that specific timestamp.
Volume Range: media.volume accepts decimal values strictly between 0.0 (silent) and 1.0 (maximum volume).
Mute State: media.muted is a boolean toggle that preserves the current volume value when toggled back on.
Dimaag Mein Bithane Ka Model
"Think of the HTML5 Media API like the remote control of a physical DVD/Blu-ray player: the play button sends a laser command to spin the disc, the timeline slider moves the laser head to a specific chapter, and the volume wheel adjusts the speaker amplifier."
💡 Pro Tip: Code ko ratta mat maaro; imagine karo ki browser har tag ko visually kaise draw karta hai.
👨🏫3. Teacher Demonstration Code
See how play/pause toggles, timeline progress scrubbing, and duration formatting are wired up using vanilla JavaScript.
Custom Dark-Themed Audio/Video Player Consolehtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Media Player</title>
<style>
body { font-family: system-ui, sans-serif; background: #060c18; color: #fff; padding: 24px; text-align: center; }
.player-card { max-width: 480px; margin: auto; background: #0c1328; border: 1px solid #1e293b; padding: 20px; border-radius: 12px; }
.progress-bar { width: 100%; height: 8px; background: #1e293b; border-radius: 4px; cursor: pointer; margin: 16px 0; position: relative; }
.progress-fill { width: 0%; height: 100%; background: #04AA6D; border-radius: 4px; }
.controls { display: flex; justify-content: space-between; align-items: center; }
button { background: #2563eb; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; }
</style>
</head>
<body>
<div class="player-card">
<h3>🎵 Nextsem Podcast Player</h3>
<audio id="audioTrack" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
<div class="progress-bar" id="progressBar"><div class="progress-fill" id="progressFill"></div></div>
<div class="controls">
<button id="playBtn">▶ Play</button>
<span id="timeDisplay" style="font-family:monospace;font-size:13px;">00:00 / 00:00</span>
<button id="muteBtn" style="background:#475569;">🔊</button>
</div>
</div>
<script>
const audio = document.getElementById("audioTrack");
const playBtn = document.getElementById("playBtn");
const fill = document.getElementById("progressFill");
playBtn.addEventListener("click", () => {
if (audio.paused) { audio.play(); playBtn.textContent = "⏸ Pause"; }
else { audio.pause(); playBtn.textContent = "▶ Play"; }
});
audio.addEventListener("timeupdate", () => {
const pct = (audio.currentTime / audio.duration) * 100;
fill.style.width = pct + "%";
});
</script>
</body>
</html>2. Hands-On Practical Lab: Follow Instructions in VS Code
Code like a professional software engineer! Follow the step-by-step instructions below in Visual Studio Code (VS Code) on your PC, test your output locally, and push to GitHub.
3 Coding Tasks
Interactive Coding TestAuto-Evaluates as you type
Day 44 Practical Task Test Studio
Test Score:0 / 3 Passed
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Toggle Media Play and Pause
Write an event listener on playBtn that checks video.paused and calls video.play() or video.pause().
⏳ WAITING
Task 2Calculate Playback Percentage
Calculate the percentage of media played using (media.currentTime / media.duration) * 100.
⏳ WAITING
Task 3Implement Volume Slider Handler
Listen to input event on volumeSlider and set media.volume to e.target.value.
⏳ WAITING
2. Type HTML & CSS Code:index.html
index.html
⚡ Real-Time Testing ActiveTab inserts 2 spaces • Live DOM refresh146 chars
Live Browser Output:
🔒 http://localhost:5500/index.html
LiveRenders live HTML & CSS typed on the left.
Interactive Bug Detective
Spot the Bug: Unhandled Play Promise Rejection on Autoplay
Tap or click on the exact line below that contains the error:
Click any code line⚠️ Broken Code Inspector
Tap buggy line1
window.addEventListener("DOMContentLoaded", () => {2
const audio = document.getElementById("player");3
audio.play(); // ❌ Fails on modern browsers!4
});Stuck? Need a detective clue before checking the solution?
Senior Developer Forensic Analysis:
Modern browsers block unmuted audio and video autoplay to protect users from unexpected noise and bandwidth consumption. media.play() returns a Promise which rejects if no user gesture (click or tap) has occurred yet. You must either start muted (video.muted = true) or wait for a user button click.
Golden Rule: Always validate code syntax and security attributes before pushing to GitHub!
📝Independent Practice: Assignment
📄 index.htmlUniversity Video Lecture Mini-Player Studio
- •Build a responsive custom video player with play/pause, restart, and 10s skip (+/- 10s) buttons.
- •Implement an interactive timeline slider that highlights the elapsed time with emerald green color (#04AA6D).
- •Display elapsed time and total duration formatted neatly as mm:ss (e.g. 02:45 / 15:30).
- •Add a volume control slider and fullscreen toggle button using document.fullscreenElement / requestFullscreen().
Submission Evaluation Criteria: Push video-player.html and player.js to your GitHub repository under day-44.
Exact Assignment Solution Code: index.html
Open Visual Studio Code on your PC (code .), create index.html, paste this complete step-by-step verified code, test in your browser, and push to your GitHub repo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BCA Day 44 - Video Lecture Player</title>
<style>
body { font-family: "Segoe UI", sans-serif; background: #060c18; color: #fff; padding: 24px; text-align: center; }
.player-wrap { max-width: 640px; margin: auto; background: #0c1328; border: 1px solid #1e293b; border-radius: 12px; overflow: hidden; }
video { width: 100%; display: block; background: #000; }
.controls { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.timeline { width: 100%; height: 6px; background: #1e293b; border-radius: 3px; cursor: pointer; position: relative; }
.timeline-fill { width: 0%; height: 100%; background: #04AA6D; border-radius: 3px; }
.btn-row { display: flex; justify-content: space-between; align-items: center; }
button { padding: 6px 14px; background: #2563eb; color: #fff; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
</style>
</head>
<body>
<div class="player-wrap">
<video id="vid" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"></video>
<div class="controls">
<div class="timeline" id="timeline"><div class="timeline-fill" id="fill"></div></div>
<div class="btn-row">
<button id="playBtn">▶ Play</button>
<span id="timeText" style="font-family:monospace;font-size:12px;">00:00 / 00:00</span>
</div>
</div>
</div>
<script>
const vid = document.getElementById("vid");
const playBtn = document.getElementById("playBtn");
const fill = document.getElementById("fill");
const timeText = document.getElementById("timeText");
function formatTime(sec) {
if (isNaN(sec)) return "00:00";
const m = Math.floor(sec / 60);
const s = Math.floor(sec % 60);
return (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s);
}
playBtn.addEventListener("click", () => {
if (vid.paused) { vid.play(); playBtn.textContent = "⏸ Pause"; }
else { vid.pause(); playBtn.textContent = "▶ Play"; }
});
vid.addEventListener("timeupdate", () => {
const pct = (vid.currentTime / vid.duration) * 100;
fill.style.width = pct + "%";
timeText.textContent = formatTime(vid.currentTime) + " / " + formatTime(vid.duration);
});
</script>
</body>
</html>Verified Assignment Code Solution (100% Tested & Ready to Run)
🎓4. Viva Check: Mandatory Conceptual Test
Why is it necessary to call e.preventDefault() during the dragover event when implementing HTML5 Drag and Drop?
5. Mandatory Step: Push to GitHub to Unlock Next Lesson
Target Repo: html-css-projects
Windows 11 Terminal / VS Code
main
1$
mkdir day-44
Create a new project folder (day-44)
2$
cd day-44
Change working directory to day-44
3$
git checkout -b feature/day-44-media-player
4$
git add index.html
5$
git commit -m "feat(day-44): implement custom html5 video audio player with seekable timeline and volume controls"
Commit staged changes with a descriptive message
6$
git push origin feature/day-44-media-player
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + Vor right-click in Windows Terminal / VS Code✨ Word wrap active (no horizontal cutoff)
Completion Prerequisites VerificationIncomplete Steps
Google Login
✔ RequiredVS Code Implementation
Step 4 Viva Check
Own GitHub Project
RequiredExact GitHub Setup Guide & Expected Structure
Day 44 RequirementsFollow these exact folder and file names to prevent verification errors.
1. GitHub Repository
html-css-projects
Must be set to Public
2. Exact FolderNEW
day-44/ or bca-day-44/
Create inside repo root
3. Exact File NameREQUIRED
index.html
⚠️ No spaces or custom names
4. What to Submit Below
https://github.com/YOU/html-css-projects
Or direct link to index.html
Terminal Commands to Create & Push Day 44
main
1$
# 1. Enter your repository directory
2$
cd html-css-projects
Change working directory to html-css-projects
3$
# 2. Create the exact folder for Day 44
4$
mkdir day-44
Create a new project folder (day-44)
5$
cd day-44
Change working directory to day-44
6$
# 3. Create your code file: index.html
7$
# (Write your Day 44 homework code inside index.html)
8$
# 4. Save, stage, commit and push to GitHub:
9$
git add .
Stage all modified files and new assets for commit
10$
git commit -m "Day 44: Custom HTML5 Audio & Video Player (Media API & Real-time Progress Bar)"
Commit staged changes with a descriptive message
11$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + Vor right-click in Windows Terminal / VS Code✨ Word wrap active (no horizontal cutoff)
How to Avoid "Could not find your practical code file" Errors:
1.Use Lowercase
index.html: Avoid spaces or custom names like Alan Turing..html or Index.HTML. Linux/GitHub servers are strictly case-sensitive.2.Separate Day Folders: Create a new folder
day-44/ for today so you don't overwrite previous days.3.Ensure Public Visibility: If your GitHub repo is Private, automated validation cannot inspect your code. Set it to Public.
4.Check on GitHub Website: Before clicking "Verify", open your repo in Google Chrome to confirm your files were pushed to branch
main.📁 github.com/YOUR_USERNAME/html-css-projects
Branch: mainREADME.md# BCA Practical Portfolio overview
day-01/Day 1 Prior Lesson
└──index.html
day-02/Day 2 Prior Lesson
└──index.html
day-03/Day 3 Prior Lesson
└──index.html
day-04/Day 4 Prior Lesson
└──index.html
day-05/Day 5 Prior Lesson
└──index.html
day-06/Day 6 Prior Lesson
└──index.html
day-07/Day 7 Prior Lesson
└──index.html
day-08/Day 8 Prior Lesson
└──index.html
day-09/Day 9 Prior Lesson
└──index.html
day-10/Day 10 Prior Lesson
└──index.html
└──styles.css
day-11/Day 11 Prior Lesson
└──index.html
day-12/Day 12 Prior Lesson
└──index.html
day-13/Day 13 Prior Lesson
└──index.html
day-14/Day 14 Prior Lesson
└──index.html
day-15/Day 15 Prior Lesson
└──index.html
day-16/Day 16 Prior Lesson
└──index.html
day-17/Day 17 Prior Lesson
└──index.html
day-18/Day 18 Prior Lesson
└──index.html
day-19/Day 19 Prior Lesson
└──index.html
day-20/Day 20 Prior Lesson
└──index.html
└──styles.css
day-21/Day 21 Prior Lesson
└──index.html
day-22/Day 22 Prior Lesson
└──index.html
day-23/Day 23 Prior Lesson
└──index.html
day-24/Day 24 Prior Lesson
└──index.html
day-25/Day 25 Prior Lesson
└──index.html
day-26/Day 26 Prior Lesson
└──index.html
day-27/Day 27 Prior Lesson
└──index.html
day-28/Day 28 Prior Lesson
└──index.html
day-29/Day 29 Prior Lesson
└──index.html
day-30/Day 30 Prior Lesson
└──index.html
└──styles.css
day-31/Day 31 Prior Lesson
└──index.html
day-32/Day 32 Prior Lesson
└──index.html
day-33/Day 33 Prior Lesson
└──index.html
day-34/Day 34 Prior Lesson
└──index.html
day-35/Day 35 Prior Lesson
└──index.html
day-36/Day 36 Prior Lesson
└──index.html
day-37/Day 37 Prior Lesson
└──index.html
day-38/Day 38 Prior Lesson
└──index.html
day-39/Day 39 Prior Lesson
└──index.html
day-40/Day 40 Prior Lesson
└──index.html
day-41/Day 41 Prior Lesson
└──index.html
day-42/Day 42 Prior Lesson
└──index.html
day-43/Day 43 Prior Lesson
└──index.html
day-44/✨ CREATE THIS FOLDER FOR TODAY (Day 44)
└──index.htmlMust contain:
Sequential Progression Enforced
You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 44 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 43: Building an Interactive Digital Signature & Sketch Pad (Canvas Mouse & Touch Events) first.
Complete Day 43 FirstCurriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal