Complete control over video playback with JavaScript
Use the controls below to interact with the video via the HTMLVideoElement API.
// Read-only properties
const video = document.querySelector('video');
console.log(video.duration); // Total length in seconds
console.log(video.currentTime); // Current playback position
console.log(video.paused); // Is video paused?
console.log(video.ended); // Has video finished?
console.log(video.readyState); // 0-4, loading state
console.log(video.videoWidth); // Native video width
console.log(video.videoHeight); // Native video height
// Writable properties
video.currentTime = 30; // Seek to 30 seconds
video.volume = 0.5; // 50% volume
video.muted = true; // Mute
video.playbackRate = 1.5; // 1.5x speed
// Playback control
video.play(); // Returns Promise
video.pause();
video.load(); // Reload sources
// Play with error handling
async function safePlay() {
try {
await video.play();
console.log('Playing');
} catch (error) {
if (error.name === 'NotAllowedError') {
console.log('Autoplay blocked - need user interaction');
}
}
}
video.addEventListener('loadedmetadata', () => {
console.log(`Duration: ${video.duration}s`);
});
video.addEventListener('play', () => {
console.log('Started playing');
});
video.addEventListener('timeupdate', () => {
// Fires frequently during playback
const progress = (video.currentTime / video.duration) * 100;
progressBar.style.width = `${progress}%`;
});