| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Video Player</title> |
| <style> |
| |
| body { |
| font-family: Arial, sans-serif; |
| margin: 0; |
| padding: 0; |
| background-color: #f0f0f0; |
| } |
| |
| |
| .video-player { |
| max-width: 100%; |
| margin: 20px auto; |
| position: relative; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| } |
| |
| |
| video { |
| width: 100%; |
| max-width: 800px; |
| height: auto; |
| display: block; |
| } |
| |
| |
| .controls { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| padding: 10px; |
| background-color: rgba(0, 0, 0, 0.7); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| flex-wrap: wrap; |
| } |
| |
| |
| button { |
| background: none; |
| border: none; |
| outline: none; |
| cursor: pointer; |
| color: #fff; |
| font-size: 20px; |
| margin: 0 10px; |
| padding: 5px 10px; |
| transition: color 0.3s ease; |
| } |
| |
| button:hover { |
| color: #ccc; |
| } |
| |
| |
| input[type="range"] { |
| -webkit-appearance: none; |
| height: 4px; |
| background-color: #fff; |
| margin: 0 10px; |
| flex-grow: 1; |
| } |
| |
| input[type="range"]::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| width: 12px; |
| height: 12px; |
| background-color: #fff; |
| border-radius: 50%; |
| cursor: pointer; |
| } |
| |
| |
| .time { |
| color: #fff; |
| font-size: 14px; |
| margin: 0 10px; |
| } |
| |
| |
| @media (max-width: 600px) { |
| .controls { |
| flex-direction: column; |
| align-items: flex-start; |
| } |
| |
| button, .time { |
| margin: 5px 0; |
| } |
| |
| input[type="range"] { |
| flex-grow: 0; |
| width: 100%; |
| } |
| } |
| </style> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /> |
| </head> |
| <body> |
| <input type="file" id="file-input" accept="video/*"> |
| <div class="video-player"> |
| <video></video> |
| <div class="controls"> |
| <button class="play-pause"> |
| <i class="fas fa-play"></i> |
| </button> |
| <input type="range" class="seek-bar" value="0"> |
| <button class="mute"> |
| <i class="fas fa-volume-up"></i> |
| </button> |
| <div class="time"> |
| <span class="current-time">0:00</span> / <span class="duration">0:00</span> |
| </div> |
| </div> |
| </div> |
| <script> |
| const video = document.querySelector('video'); |
| const playPauseBtn = document.querySelector('.play-pause'); |
| const playPauseIcon = playPauseBtn.querySelector('i'); |
| const seekBar = document.querySelector('.seek-bar'); |
| const muteBtn = document.querySelector('.mute'); |
| const muteIcon = muteBtn.querySelector('i'); |
| const currentTime = document.querySelector('.current-time'); |
| const duration = document.querySelector('.duration'); |
| const fileInput = document.querySelector('#file-input'); |
| |
| fileInput.addEventListener('change', (event) => { |
| const file = event.target.files[0]; |
| const fileURL = URL.createObjectURL(file); |
| video.src = fileURL; |
| }); |
| |
| playPauseBtn.addEventListener('click', () => { |
| if (video.paused) { |
| video.play(); |
| playPauseIcon.classList.remove('fa-play'); |
| playPauseIcon.classList.add('fa-pause'); |
| } else { |
| video.pause(); |
| playPauseIcon.classList.remove('fa-pause'); |
| playPauseIcon.classList.add('fa-play'); |
| } |
| }); |
| |
| seekBar.addEventListener('change', () => { |
| const time = video.duration * (seekBar.value / 100); |
| video.currentTime = time; |
| }); |
| |
| muteBtn.addEventListener('click', () => { |
| video.muted = !video.muted; |
| muteIcon.classList.toggle('fa-volume-up'); |
| muteIcon.classList.toggle('fa-volume-mute'); |
| }); |
| |
| video.addEventListener('timeupdate', () => { |
| const value = (100 / video.duration) * video.currentTime; |
| seekBar.value = value; |
| |
| currentTime.textContent = formatTime(video.currentTime); |
| duration.textContent = formatTime(video.duration); |
| }); |
| |
| function formatTime(time) { |
| const minutes = Math.floor(time / 60); |
| const seconds = Math.floor(time % 60); |
| return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; |
| } |
| </script> |
| </body> |
| </html> |
