mplementing a custom HTML5 video player with play, pause, and seek functionalities using JavaScript involves creating HTML elements for the video and controls, and writing JavaScript to handle the functionalities. Here's a step-by-step guide to achieve this:
HTML Structure
Create a basic HTML structure with a video element and custom control buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Video Player</title>
<style>
/* Basic styling for the video player */
#videoPlayer {
width: 600px;
height: 340px;
margin: 20px auto;
background: #000;
position: relative;
}
video {
width: 100%;
height: 100%;
}
#controls {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
display: flex;
justify-content: space-between;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 5px;
}
button, input[type="range"] {
background: #fff;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
button:hover, input[type="range"] {
background: #ddd;
}
</style>
</head>
<body>
<div id="videoPlayer">
<video id="video" src="path/to/your/video.mp4"></video>
<div id="controls">
<button id="playPause">Play</button>
<input type="range" id="seekBar" value="0" max="100">
</div>
</div>
<script>
// JavaScript to add functionality to the custom video player
// Get references to the HTML elements
const video = document.getElementById('video');
const playPauseButton = document.getElementById('playPause');
const seekBar = document.getElementById('seekBar');
// Play or pause the video when the button is clicked
playPauseButton.addEventListener('click', () => {
if (video.paused) {
video.play();
playPauseButton.textContent = 'Pause';
} else {
video.pause();
playPauseButton.textContent = 'Play';
}
});
// Update the seek bar as the video plays
video.addEventListener('timeupdate', () => {
const value = (100 / video.duration) * video.currentTime;
seekBar.value = value;
});
// Seek to the new time when the seek bar value changes
seekBar.addEventListener('input', () => {
const time = video.duration * (seekBar.value / 100);
video.currentTime = time;
});
// Ensure the play/pause button text is updated when the video ends
video.addEventListener('ended', () => {
playPauseButton.textContent = 'Play';
});
</script>
</body>
</html>
