<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Video Player with Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
/* Hide the default video controls */
.video-container video {
controls: none;
}
/* Create a custom control bar */
.video-container .controls {
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
padding: 10px;
opacity: 0;
transition: opacity 0.5s ease;
}
/* Show the control bar on hover */
.video-container:hover .controls {
opacity: 1;
}
/* Style the control bar buttons */
.video-container .controls button {
border: none;
background-color: transparent;
color: white;
padding: 0 5px;
cursor: pointer;
}
/* Style the progress bar */
.video-container .progress {
height: 10px;
background-color: #ccc;
border-radius: 5px;
}
.video-container .progress-bar {
background-color: #007bff;
border-radius: 5px;
}
/* Style the volume slider */
.video-container .volume-slider {
width: 100px;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="video-container">
<video src="video.mp4" width="640" height="360" autoplay></video>
<div class="controls">
<button onclick="playPause()">Play/Pause</button>
<button onclick="mute()">Mute</button>
<input type="range" min="0" max="1" step="0.01" value="1" class="volume-slider" oninput="setVolume()">
<div class="progress">
<div class="progress-bar" style="width: 0%"></div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script>
let video = document.querySelector('video');
let progress = document.querySelector('.progress-bar');
let playPauseButton = document.querySelector('button[onclick="playPause()"]');
video.ontimeupdate = function() {
let percentage = (video.currentTime / video.duration) * 100;
progress.style.width = percentage + '%';
};
function playPause() {
if (video.paused) {
video.play();
playPauseButton.textContent = 'Pause';
} else {
video.pause();
playPauseButton.textContent = 'Play';
}
}
function mute() {
if (video.muted) {
video.muted = false;
volumeSlider.value = 1;
} else {
video.muted = true;
volumeSlider.value = 0;
}
}
let
