Modern Video Player - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Modern Video Player</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .video-container { position: relative; width: 70%; max-width: 800px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); border-radius: 15px; overflow: hidden; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); } video { width: 100%; display: block; border-radius: 15px; } .controls { position: absolute; bottom: 0; width: 100%; background: rgba(0, 0, 0, 0.7); display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; } .controls button { background: none; border: none; color: white; font-size: 20px; cursor: pointer; margin: 0 5px; transition: transform 0.2s; } .controls button:hover { transform: scale(1.2); } .play-pause { font-size: 30px; } .progress-container { flex-grow: 1; margin: 0 10px; } .progress { width: 100%; height: 5px; background: #ddd; cursor: pointer; border-radius: 5px; overflow: hidden; } .progress-filled { width: 0; height: 100%; background: #fff; transition: width 0.2s; } .timestamp { color: white; font-size: 14px; margin-right: 30px; } .emoji { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 50px; opacity: 0; animation: fadeInOut 1s ease-in-out; } @keyframes fadeInOut { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } </style> </head> <body> <div class="video-container"> <video id="video" src="https://www.w3schools.com/html/mov_bbb.mp4"></video> <div class="emoji" id="emoji">π</div> <div class="controls"> <button id="play-pause" class="play-pause">βΆοΈ</button> <div class="progress-container"> <div class="progress"> <div class="progress-filled"></div> </div> </div> <button id="volume-toggle">π</button> <div class="timestamp" id="timestamp">00:00</div> </div> </div> <script> const video = document.getElementById('video'); const playPauseButton = document.getElementById('play-pause'); const volumeToggleButton = document.getElementById('volume-toggle'); const progress = document.querySelector('.progress'); const progressFilled = document.querySelector('.progress-filled'); const timestamp = document.getElementById('timestamp'); const emoji = document.getElementById('emoji'); playPauseButton.addEventListener('click', togglePlayPause); video.addEventListener('click', togglePlayPause); video.addEventListener('timeupdate', updateProgress); progress.addEventListener('click', setProgress); volumeToggleButton.addEventListener('click', toggleVolume); function togglePlayPause() { if (video.paused) { video.play(); playPauseButton.textContent = 'βΈοΈ'; emoji.textContent = 'π¬'; } else { video.pause(); playPauseButton.textContent = 'βΆοΈ'; emoji.textContent = 'π'; } emoji.style.opacity = 1; setTimeout(() => { emoji.style.opacity = 0; }, 1000); } function toggleVolume() { video.muted = !video.muted; volumeToggleButton.textContent = video.muted ? 'π' : 'π'; } function updateProgress() { const progressPercent = (video.currentTime / video.duration) * 100; progressFilled.style.width = `${progressPercent}%`; const minutes = Math.floor(video.currentTime / 60); const seconds = Math.floor(video.currentTime % 60); timestamp.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; } function setProgress(e) { const newTime = (e.offsetX / progress.offsetWidth) * video.duration; video.currentTime = newTime; } </script> </body> </html>