JavaScript Video Examples
Learn to control video playback, create custom video players, and add interactive video features using JavaScript and HTML5 Video API.
Introduction to Video Control
JavaScript provides powerful APIs to control HTML5 video elements. With just a few lines of code, you can create custom video players, add playback controls, and create interactive video experiences.
Key Video Capabilities:
- Play, pause, and seek through video content
- Control volume and mute settings
- Create custom progress bars and time displays
- Implement fullscreen mode
- Add video effects and filters
Example 1: Basic Video Playback
This example demonstrates how to control basic video playback using JavaScript. The HTML5 video element provides a built-in player, but we can enhance it with custom controls using JavaScript.
// Basic Video Playback
const video1 = document.getElementById('video1');
const playBtn1 = document.getElementById('playBtn1');
const pauseBtn1 = document.getElementById('pauseBtn1');
function playVideo() {
video1.play();
playBtn1.disabled = true;
pauseBtn1.disabled = false;
}
function pauseVideo() {
video1.pause();
playBtn1.disabled = false;
pauseBtn1.disabled = true;
}
// Initialize button states
pauseBtn1.disabled = true;
Basic Video Playback Demo
Example 2: Extended Video Controls
This example adds more advanced controls to the video player, including volume adjustment, mute toggle, and fullscreen mode.
// Extended Video Controls
const video2 = document.getElementById('video2');
const playBtn2 = document.getElementById('playBtn2');
const pauseBtn2 = document.getElementById('pauseBtn2');
const volUpBtn = document.getElementById('volUpBtn');
const volDownBtn = document.getElementById('volDownBtn');
const muteBtn = document.getElementById('muteBtn');
const fullscreenBtn = document.getElementById('fullscreenBtn');
// Play/Pause functions
function playVideo2() {
video2.play();
playBtn2.disabled = true;
pauseBtn2.disabled = false;
}
function pauseVideo2() {
video2.pause();
playBtn2.disabled = false;
pauseBtn2.disabled = true;
}
// Volume control functions
function volumeUp() {
if (video2.volume < 1) video2.volume = Math.min(1, video2.volume + 0.1);
}
function volumeDown() {
if (video2.volume > 0) video2.volume = Math.max(0, video2.volume - 0.1);
}
// Mute toggle function
function toggleMute() {
video2.muted = !video2.muted;
muteBtn.innerHTML = video2.muted ?
'<i class="fas fa-volume-mute"></i> Unmute' :
'<i class="fas fa-volume-up"></i> Mute';
}
// Fullscreen function
function toggleFullscreen() {
if (!document.fullscreenElement) {
video2.requestFullscreen().catch(err => {
console.error(`Error attempting to enable fullscreen: ${err.message}`);
});
} else {
document.exitFullscreen();
}
}
// Initialize button states
pauseBtn2.disabled = true;
Extended Controls Demo
Example 3: Custom Video Player
This example creates a fully customized video player with a progress bar, time display, and integrated controls. All elements are styled with CSS and controlled with JavaScript.
// Custom Video Player
const video3 = document.getElementById('video3');
const playPauseBtn = document.getElementById('playPauseBtn');
const progressBar = document.getElementById('progressBar');
const progressContainer = document.getElementById('progressContainer');
const timeDisplay = document.getElementById('timeDisplay');
const volumeSlider = document.getElementById('volumeSlider');
// Play/Pause toggle
function togglePlayPause() {
if (video3.paused) {
video3.play();
playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
} else {
video3.pause();
playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
}
}
// Update progress bar as video plays
video3.addEventListener('timeupdate', () => {
const progressPercent = (video3.currentTime / video3.duration) * 100;
progressBar.style.width = `${progressPercent}%`;
// Update time display
const minutes = Math.floor(video3.currentTime / 60);
const seconds = Math.floor(video3.currentTime % 60);
timeDisplay.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds} /
${Math.floor(video3.duration / 60)}:${Math.floor(video3.duration % 60)}`;
});
// Seek video when clicking on progress bar
progressContainer.addEventListener('click', (e) => {
const pos = (e.pageX - progressContainer.offsetLeft) / progressContainer.offsetWidth;
video3.currentTime = pos * video3.duration;
});
// Volume control
volumeSlider.addEventListener('input', () => {
video3.volume = volumeSlider.value;
});
// Initialize volume slider
volumeSlider.value = video3.volume;
Custom Video Player Demo
0:00 / 0:00
More Video Examples
Explore more JavaScript video capabilities with these examples: