HTML5 Video Player with Custom Controls

Embed a video using the HTML5 <video> tag and create custom player controls (play/pause, volume, fullscreen) using JavaScript for a unique viewing experience.

HTML CSS JavaScript Output Live Updates

const video = document.getElementById('myVideo');
const playPauseBtn = document.getElementById('playPauseBtn');
const volumeSlider = document.getElementById('volumeSlider');
const fullScreenBtn = document.getElementById('fullScreenBtn');

playPauseBtn.addEventListener('click', () => {
  if (video.paused || video.ended) {
    video.play();
    playPauseBtn.textContent = 'Pause';
  } else {
    video.pause();
    playPauseBtn.textContent = 'Play';
  }
});

volumeSlider.addEventListener('input', (e) => {
  video.volume = e.target.value;
});

fullScreenBtn.addEventListener('click', () => {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.mozRequestFullScreen) { /* Firefox */
    video.mozRequestFullScreen();
  } else if (video.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    video.webkitRequestFullscreen();
  } else if (video.msRequestFullscreen) { /* IE/Edge */
    video.msRequestFullscreen();
  }
});

video.addEventListener('play', () => playPauseBtn.textContent = 'Pause');
video.addEventListener('pause', () => playPauseBtn.textContent = 'Play');