Skip to content

Commit 415e5a4

Browse files
tin2tintin2tin
authored
Create video_playback.html
1 parent ea394b1 commit 415e5a4

1 file changed

Lines changed: 155 additions & 0 deletions

File tree

‎video_playback.html‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Video Background with Playback and Sound Options</title>
7+
<style>
8+
/* Basic CSS reset to remove default margins and padding */
9+
body, html {
10+
margin: 0;
11+
padding: 0;
12+
height: 100%;
13+
overflow: hidden; /* Prevents scrollbars from appearing */
14+
font-family: Arial, sans-serif;
15+
}
16+
17+
/* Container for the video to ensure it covers the entire background */
18+
.video-container {
19+
position: fixed;
20+
top: 0;
21+
left: 0;
22+
width: 100%;
23+
height: 100%;
24+
z-index: -1; /* Places the video behind other content */
25+
}
26+
27+
/* The video element itself */
28+
#bg-video {
29+
width: 100%;
30+
height: 100%;
31+
object-fit: cover; /* Ensures the video covers the area without distortion */
32+
}
33+
34+
/* Container for all the control buttons */
35+
.controls {
36+
position: absolute;
37+
top: 50%;
38+
left: 50%;
39+
transform: translate(-50%, -50%);
40+
text-align: center;
41+
background-color: rgba(0, 0, 0, 0.5); /* Add a background to the container for better readability */
42+
padding: 20px;
43+
border-radius: 10px;
44+
}
45+
46+
/* Styling for the buttons */
47+
.controls button {
48+
color: white;
49+
border: 2px solid white;
50+
padding: 10px 20px;
51+
margin: 5px;
52+
font-size: 16px;
53+
cursor: pointer;
54+
border-radius: 5px;
55+
background-color: transparent;
56+
transition: background-color 0.3s, color 0.3s;
57+
}
58+
59+
.controls button:hover {
60+
background-color: white;
61+
color: black;
62+
}
63+
64+
/* A simple container to group related buttons */
65+
.control-group {
66+
margin-bottom: 15px;
67+
}
68+
69+
.control-group:last-child {
70+
margin-bottom: 0;
71+
}
72+
73+
</style>
74+
</head>
75+
<body>
76+
77+
<div class="video-container">
78+
<!-- The 'muted' attribute is necessary for autoplay in most modern browsers -->
79+
<video id="bg-video" autoplay muted poster="https://via.placeholder.com/1920x1080.png?text=Video+Loading...">
80+
<!-- You can replace this source with your own video file -->
81+
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
82+
Your browser does not support the video tag.
83+
</video>
84+
</div>
85+
86+
<div class="controls">
87+
<div class="control-group">
88+
<button id="loop-btn">Loop Video</button>
89+
<button id="play-once-btn">Play Once & Freeze</button>
90+
</div>
91+
<div class="control-group">
92+
<button id="unmute-btn">Unmute</button>
93+
<button id="mute-btn">Mute</button>
94+
</div>
95+
</div>
96+
97+
<script>
98+
// Get the video and all button elements from the document
99+
const video = document.getElementById('bg-video');
100+
const loopBtn = document.getElementById('loop-btn');
101+
const playOnceBtn = document.getElementById('play-once-btn');
102+
const unmuteBtn = document.getElementById('unmute-btn');
103+
const muteBtn = document.getElementById('mute-btn');
104+
105+
// --- Playback Controls ---
106+
107+
// Function to handle freezing on the last frame
108+
const freezeOnEnd = () => {
109+
video.pause();
110+
};
111+
112+
// Event listener for the "Loop Video" button
113+
loopBtn.addEventListener('click', () => {
114+
console.log("Looping video");
115+
video.loop = true; // Set the video to loop
116+
video.play();
117+
// Remove the 'ended' event listener if it was previously added to prevent conflicts
118+
video.removeEventListener('ended', freezeOnEnd);
119+
});
120+
121+
// Event listener for the "Play Once & Freeze" button
122+
playOnceBtn.addEventListener('click', () => {
123+
console.log("Playing once");
124+
video.loop = false; // Ensure the video does not loop
125+
video.currentTime = 0; // Rewind to the start
126+
video.play();
127+
// When the video ends, call the freezeOnEnd function
128+
video.addEventListener('ended', freezeOnEnd);
129+
});
130+
131+
132+
// --- Sound Controls ---
133+
134+
// Event listener for the "Unmute" button
135+
unmuteBtn.addEventListener('click', () => {
136+
console.log("Unmuting video");
137+
video.muted = false;
138+
});
139+
140+
// Event listener for the "Mute" button
141+
muteBtn.addEventListener('click', () => {
142+
console.log("Muting video");
143+
video.muted = true;
144+
});
145+
146+
147+
// --- Initial State ---
148+
149+
// By default, set the video to loop when the page loads
150+
video.loop = true;
151+
152+
</script>
153+
154+
</body>
155+
</html>

0 commit comments

Comments
 (0)