.progress-bar:hover height: 8px;
/* loading / overlay (optional subtle hint) */ .video-wrapper::after content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(circle at center, transparent 60%, rgba(0,0,0,0.1)); opacity: 0; transition: opacity 0.2s; /* small badge (just for style) */ .player-footer background: rgba(0,0,0,0.3); text-align: center; font-size: 0.7rem; padding: 0.5rem; color: #94a3b8; letter-spacing: 0.3px; border-top: 1px solid rgba(255,255,255,0.05); a color: #7aa2f7; text-decoration: none; </style> <!-- FontAwesome Icons (free CDN) for nice icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> custom html5 video player codepen
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Custom HTML5 Video Player | Sleek & Modern</title> <style> /* RESET & GLOBAL */ * margin: 0; padding: 0; box-sizing: border-box; user-select: none; /* avoid accidental selection on UI buttons */ .progress-bar:hover height: 8px
<!-- Progress Bar --> <div class="progress-container"> <div class="progress-bar" id="progressBar"> <div class="progress-filled" id="progressFilled"></div> </div> </div> background: radial-gradient(circle at center
// Video initial state let isPlaying = false; let wasPlayingBeforeSeek = false; // Helper: format time (seconds) -> MM:SS function formatTime(seconds) if (isNaN(seconds)) return "00:00"; const hrs = Math.floor(seconds / 3600); const mins = Math.floor((seconds % 3600) / 60); const secs = Math.floor(seconds % 60); if (hrs > 0) return `$hrs.toString().padStart(2, '0'):$mins.toString().padStart(2, '0'):$secs.toString().padStart(2, '0')`; return `$mins.toString().padStart(2, '0'):$secs.toString().padStart(2, '0')`; // Update time display and progress bar fill function updateProgressAndTime() if (!video.duration // Play/Pause toggle UI function updatePlayPauseUI() if (video.paused) playIcon.classList.remove('fa-pause'); playIcon.classList.add('fa-play'); isPlaying = false; else playIcon.classList.remove('fa-play'); playIcon.classList.add('fa-pause'); isPlaying = true; function togglePlayPause() if (video.paused) video.play().catch(e => console.warn("Playback failed:", e)); else video.pause(); updatePlayPauseUI(); // Event listeners for video native events video.addEventListener('play', () => updatePlayPauseUI(); ); video.addEventListener('pause', () => updatePlayPauseUI(); ); video.addEventListener('timeupdate', updateProgressAndTime); video.addEventListener('loadedmetadata', () => updateProgressAndTime(); // set volume slider initial to match video volume volumeSlider.value = video.volume; updateMuteIcon(video.muted ); video.addEventListener('volumechange', () => ); // Progress bar seeking (click & drag) let seeking = false; function seekFromEvent(e) const rect = progressBar.getBoundingClientRect(); let clickX = e.clientX - rect.left; clickX = Math.min(Math.max(clickX, 0), rect.width); const percent = clickX / rect.width; if (video.duration && isFinite(video.duration)) const newTime = percent * video.duration; video.currentTime = newTime; updateProgressAndTime(); progressBar.addEventListener('mousedown', (e) => seeking = true; // store play state before seek wasPlayingBeforeSeek = !video.paused; if (!video.paused) video.pause(); seekFromEvent(e); e.preventDefault(); ); window.addEventListener('mousemove', (e) => if (seeking) seekFromEvent(e); ); window.addEventListener('mouseup', () => if (seeking) if (wasPlayingBeforeSeek) video.play().catch(err => console.log("auto resume error", err)); seeking = false; ); // optional: touch support for progress bar progressBar.addEventListener('touchstart', (e) => e.preventDefault(); seeking = true; wasPlayingBeforeSeek = !video.paused; if (!video.paused) video.pause(); const touch = e.touches[0]; const fakeEvent = clientX: touch.clientX ; seekFromEvent(fakeEvent); ); window.addEventListener('touchmove', (e) => if (seeking && e.touches.length) const touch = e.touches[0]; const fakeEvent = clientX: touch.clientX ; seekFromEvent(fakeEvent); ); window.addEventListener('touchend', () => { if (seeking) { if (wasPlayingBeforeSeek) { video.play().catch(()=>{}); } seeking = false; } }); // Volume & mute function updateMuteIcon(isMuted) volumeSlider.addEventListener('input', (e) => const val = parseFloat(e.target.value); video.volume = val; video.muted = false; updateMuteIcon(false); ); muteBtn.addEventListener('click', () => if (video.muted) video.muted = false; // restore previous volume if needed, but keep slider value if (video.volume === 0) video.volume = 0.5; volumeSlider.value = video.volume; else video.muted = true; updateMuteIcon(video.muted); ); // Playback Speed speedSelect.addEventListener('change', (e) => video.playbackRate = parseFloat(e.target.value); ); // Fullscreen functionality function toggleFullscreen() const container = document.querySelector('.player-container'); if (!document.fullscreenElement) container.requestFullscreen().catch(err => console.warn(`Fullscreen error: $err.message`); ); else document.exitFullscreen(); fullscreenBtn.addEventListener('click', toggleFullscreen); // Also optional: double click on video to fullscreen videoWrapper.addEventListener('dblclick', (e) => e.stopPropagation(); toggleFullscreen(); ); // Click on video to play/pause video.addEventListener('click', (e) => e.stopPropagation(); togglePlayPause(); ); // Play/Pause button click playPauseBtn.addEventListener('click', (e) => e.stopPropagation(); togglePlayPause(); ); // Keyboard controls: space, k, arrow left/right, up/down, f fullscreen window.addEventListener('keydown', (e) => ); // Initial volume set video.volume = 0.8; volumeSlider.value = 0.8; video.muted = false; // If video fails to load any metadata, ensure default video.addEventListener('error', () => console.warn("Video source error, but sample should work. Check internet."); timeDisplay.innerText = "00:00 / 00:00"; ); // small style for buffering: not needed, but elegant updateProgressAndTime(); })(); </script> </body> </html>