MasterCraft
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Slideshow</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f4f4f4;
}
video {
width: 80%;
max-width: 800px;
}
.controls {
margin-top: 10px;
}
button {
padding: 10px;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<video id="videoPlayer" controls>
<source src="video1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="controls">
<button onclick="prevVideo()">Previous</button>
<button onclick="nextVideo()">Next</button>
</div>
<script>
const videos = ["video1.mp4", "video2.mp4", "video3.mp4"];
let currentVideoIndex = 0;
const videoPlayer = document.getElementById("videoPlayer");
function nextVideo() {
currentVideoIndex = (currentVideoIndex + 1) % videos.length;
videoPlayer.src = videos[currentVideoIndex];
videoPlayer.play();
}
function prevVideo() {
currentVideoIndex = (currentVideoIndex - 1 + videos.length) % videos.length;
videoPlayer.src = videos[currentVideoIndex];
videoPlayer.play();
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Slideshow</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f4f4f4;
}
video {
width: 80%;
max-width: 800px;
}
.controls {
margin-top: 10px;
}
button {
padding: 10px;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<video id="videoPlayer" controls>
<source src="video1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="controls">
<button onclick="prevVideo()">Previous</button>
<button onclick="nextVideo()">Next</button>
</div>
<script>
const videos = ["video1.mp4", "video2.mp4", "video3.mp4"];
let currentVideoIndex = 0;
const videoPlayer = document.getElementById("videoPlayer");
function nextVideo() {
currentVideoIndex = (currentVideoIndex + 1) % videos.length;
videoPlayer.src = videos[currentVideoIndex];
videoPlayer.play();
}
function prevVideo() {
currentVideoIndex = (currentVideoIndex - 1 + videos.length) % videos.length;
videoPlayer.src = videos[currentVideoIndex];
videoPlayer.play();
}
</script>
</body>
</html>