<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Player</title>
</head>
<body>
<video id="videoPlayer" controls>
<source src="YOUR_GOOGLE_DRIVE_LINK_HERE" type="video/mp4">
Your browser does not support the video tag.
</video>
<button onclick="previousVideo()">Previous</button>
<button onclick="nextVideo()">Next</button>
<select id="videoSelect">
<option value="1">1</option>
<option value="2">2</option>
<!-- Add more options up to 20 -->
</select>
<button onclick="loadVideo()">Load Video</button>
<script>
const videoPlayer = document.getElementById('videoPlayer');
const videoSelect = document.getElementById('videoSelect');
const videoLinks = [
'YOUR_GOOGLE_DRIVE_LINK_TO_VIDEO_1',
'YOUR_GOOGLE_DRIVE_LINK_TO_VIDEO_2',
// Add more links up to 20
];
let currentVideoIndex = 0;
function loadVideo() {
const selectedValue = parseInt(videoSelect.value);
if (selectedValue >= 1 && selectedValue <= videoLinks.length) {
currentVideoIndex = selectedValue - 1;
videoPlayer.src = videoLinks[currentVideoIndex];
}
}
function previousVideo() {
currentVideoIndex = (currentVideoIndex - 1 + videoLinks.length) % videoLinks.length;
videoPlayer.src = videoLinks[currentVideoIndex];
videoSelect.value = currentVideoIndex + 1;
}
function nextVideo() {
currentVideoIndex = (currentVideoIndex + 1) % videoLinks.length;
videoPlayer.src = videoLinks[currentVideoIndex];
videoSelect.value = currentVideoIndex + 1;
}
</script>
</body>
</html>