Neon 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>Neon Player</title> <style> body { font-family: 'Courier New', Courier, monospace; background: #0d0d0d; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .video-container { position: relative; width: 70%; max-width: 800px; border-radius: 15px; overflow: hidden; background: linear-gradient(135deg, #ff00cc, #3333ff); box-shadow: 0 0 20px rgba(255, 0, 204, 0.7); } video { width: 100%; border-radius: 15px; } .controls { position: absolute; bottom: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.8); padding: 10px; box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.3); } .controls button { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; margin: 0 5px; } .controls button:hover { color: #ff00cc; } .play-pause { font-size: 36px; } .progress-container { flex-grow: 1; margin: 0 10px; } .progress { width: 100%; height: 6px; background: #555; cursor: pointer; border-radius: 3px; overflow: hidden; } .progress-filled { width: 0; height: 100%; background: #ff00cc; transition: width 0.2s; } .timestamp { color: #fff; font-size: 14px; margin-right: 30px; } </style> </head> <body> <div class="video-container"> <video id="video" src="https://www.w3schools.com/html/mov_bbb.mp4"></video> <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'); 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 = '⏸️'; } else { video.pause(); playPauseButton.textContent = '▶️'; } } 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>