HTMLVideoElement

Key Properties

Property	Type	Description
src	string	URL of the video file. ▾
JS `video.src = 'clip.mp4'; video.load(); // required after changing src`
currentTime	number	Current playback position in seconds. Readable and writable. ▾
JS `console.log(video.currentTime); // e.g. 12.4 seconds video.currentTime = 30; // seek to 30s`
duration	number	Total video length in seconds. Read-only. ▾
JS `console.log(video.duration); // e.g. 120.5 const pct = video.currentTime / video.duration * 100; console.log(pct + '% through');`
volume	number	Volume from 0.0 (silent) to 1.0 (full). ▾
JS `video.volume = 0.5; // 50% volume video.volume = 0; // silent (same as muted)`
muted	boolean	Mutes/unmutes without changing volume level. ▾
JS `video.muted = true; // mute video.muted = false; // unmute (volume returns to previous)`
paused	boolean	True if the video is not playing. Read-only. ▾
JS `if (video.paused) { video.play(); } else { video.pause(); }`
playbackRate	number	Playback speed. 1 = normal, 2 = double speed, 0.5 = half speed. ▾
JS `video.playbackRate = 1.5; // 1.5x speed video.playbackRate = 0.5; // slow motion`

Common Methods

Method	Returns	Description
play()	Promise	Starts playback. Returns a Promise (can fail if browser blocks autoplay). ▾
JS `video.play().catch(err => { console.log('Autoplay blocked:', err); });`
pause()	void	Pauses playback. ▾
JS `video.pause();`

Quick Examples

JS

const video = document.querySelector('video');

// Custom play/pause button
document.querySelector('#btn').addEventListener('click', () => {
  if (video.paused) video.play();
  else video.pause();
});

// Progress bar update
video.addEventListener('timeupdate', () => {
  const pct = (video.currentTime / video.duration) * 100;
  document.querySelector('#progress').style.width = pct + '%';
});

// Seek on click
document.querySelector('#progress-bar').addEventListener('click', (e) => {
  const rect = e.target.getBoundingClientRect();
  const pct = (e.clientX - rect.left) / rect.width;
  video.currentTime = pct * video.duration;
});

Related Elements

Related Properties

Related Methods

Video Element