/* style.css */ #video-player { max-width: 640px; position: relative; } #video-controls { background: rgba(0,0,0,0.5); color: #fff; padding: 10px; position: absolute; bottom: 0; width: 100%; display: flex; justify-content: space-between; } button { background: none; border: 1px solid #fff; color: #fff; padding: 5px 10px; cursor: pointer; } button:hover, button:focus { background: #fff; color: #000; } #volume-slider { width: 100px; } // script.js document.addEventListener('DOMContentLoaded', function() { var video = document.getElementById('video'); var playPauseBtn = document.getElementById('play-pause'); var rewindBtn = document.getElementById('rewind'); var forwardBtn = document.getElementById('forward'); var volumeSlider = document.getElementById('volume-slider'); var muteBtn = document.getElementById('mute'); var qualitySelect = document.getElementById('quality'); var videoSource = document.getElementById('video-source'); playPauseBtn.addEventListener('click', function() { if (video.paused) { video.play(); playPauseBtn.textContent = 'Pause'; } else { video.pause(); playPauseBtn.textContent = 'Play'; } }); rewindBtn.addEventListener('click', function() { video.currentTime -= 10; }); forwardBtn.addEventListener('click', function() { video.currentTime += 10; }); volumeSlider.addEventListener('input', function() { video.volume = this.value; }); muteBtn.addEventListener('click', function() { if (video.muted) { video.muted = false; muteBtn.textContent = 'Mute'; } else { video.muted = true; muteBtn.textContent = 'Unmute'; } }); qualitySelect.addEventListener('change', function() { var currentTime = video.currentTime; var isPaused = video.paused; if (this.value === '4k') { videoSource.src = 'example_4k.mp4'; } else { videoSource.src = 'example_1080p.mp4'; } video.load(); video.currentTime = currentTime; if (!isPaused) video.play(); }); });