<!-- Progress Bar --> <div class="progress-container"> <div class="progress-bar" id="progressBar"> <div class="progress-filled" id="progressFilled"></div> </div> </div>
<!-- Playback speed --> <select id="speedSelect" class="speed-select" aria-label="Playback Speed"> <option value="0.5">0.5x</option> <option value="0.75">0.75x</option> <option value="1" selected>1x</option> <option value="1.25">1.25x</option> <option value="1.5">1.5x</option> <option value="2">2x</option> </select>
.progress-bar:hover height: 8px;
/* VIDEO WRAPPER (controls layer) */ .video-wrapper position: relative; width: 100%; background: #000; cursor: pointer;
<!-- Volume control with icon --> <div class="volume-wrapper"> <button class="ctrl-btn" id="muteBtn" style="background:transparent; width:32px; height:32px;" aria-label="Mute"> <i class="fas fa-volume-up"></i> </button> <input type="range" id="volumeSlider" class="volume-slider" min="0" max="1" step="0.02" value="0.8"> </div> custom html5 video player codepen
<script> (function() { // DOM elements const video = document.getElementById('videoPlayer'); const playPauseBtn = document.getElementById('playPauseBtn'); const playIcon = playPauseBtn.querySelector('i'); const timeDisplay = document.getElementById('timeDisplay'); const progressBar = document.getElementById('progressBar'); const progressFilled = document.getElementById('progressFilled'); const muteBtn = document.getElementById('muteBtn'); const volumeSlider = document.getElementById('volumeSlider'); const speedSelect = document.getElementById('speedSelect'); const fullscreenBtn = document.getElementById('fullscreenBtn'); const videoWrapper = document.getElementById('videoWrapper');
.volume-slider::-webkit-slider-thumb -webkit-appearance: none; width: 12px; height: 12px; background: #ffffff; border-radius: 50%; cursor: pointer; box-shadow: 0 0 4px #3b82f6; !-- Progress Bar -->
<!-- Fullscreen button --> <button class="ctrl-btn fullscreen-btn" id="fullscreenBtn" aria-label="Fullscreen"> <i class="fas fa-expand"></i> </button> </div> <div class="player-footer"> 🎬 Custom HTML5 Video Player • Click video to play/pause • Drag progress & volume </div> </div>
/* BUTTONS STYLE */ .ctrl-btn background: transparent; border: none; color: #f0f3fa; font-size: 1.35rem; width: 40px; height: 40px; border-radius: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1); background: rgba(255, 255, 255, 0.05); div class="progress-bar" id="progressBar">