<div style="border-radius: 16px; border: 0px solid gray; height: 100%; margin: 40px auto; max-width: 800px; overflow: hidden; position: relative;">
<div style="background-image: url('https://st.depositphotos.com/1019714/1954/v/450/depositphotos_19545001-stock-illustration-abstract-music-background.jpg'); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; height: 100%; left: 0px; opacity: 1.1; position: absolute; top: 0px; width: 100%; z-index: 0;"></div><div style="color: black; font-size: x-large; height: auto; line-height: 1.6; padding: 10px; position: relative; z-index: 1;">
<h3>🎥 Video Player Nyeleneh</h3>
<video id="nyelVideo" controls style="width: 100%; max-width: 800px; aspect-ratio: 16/9; display: none;">Browser tidak mendukung tag video.</video>
<br>
<input type="file" id="nyelUpload" accept="video/*" multiple webkitdirectory directory><br>
<button id="nyelModeBtn" style="display: none;">🔁 Mode: Ulang</button>
<button id="nyelPlaylistBtn" style="display: none;"><span class="blink-emoji">🔵</span> Playlist</button>
<button id="nyelOffBtn" style="display: none;">🔴 OFF</button>
<div id="nyelPlaylist" style="display: none; max-width:800px; text-align: left; margin:auto;">
</div></div></div>
<!-- 🔴 Script vidio Player offline -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Nyeleneh Video Player</title>
<style>
#nyelPlaylist span
{display: block;
cursor: pointer;
padding: 4px 0;
color: black;
font-family: sans-serif;
font-size: 14px;}
#nyelPlaylist span:hover {color: blue;
text-decoration: underline;}
#nyelPlaylist .active {color: red;
font-weight: bold; }
</style>
</head>
<body>
<!-- 🔴 Script vidio Player offline -->
<script>
(function(){
const video = document.getElementById("nyelVideo");
const upload = document.getElementById("nyelUpload");
const modeBtn = document.getElementById("nyelModeBtn");
const playlistBtn = document.getElementById("nyelPlaylistBtn");
const offBtn = document.getElementById("nyelOffBtn");
const playlistDiv = document.getElementById("nyelPlaylist");
let videoFiles = [];
let currentIndex = 0;
let mode = 1;
const modeLabels = ["Reverse", "Ulang", "Acak", "Satu lalu OFF"];
const modeIcons = ["🔃", "🔁", "🔀", "⏹"];
modeBtn.onclick = () => {
mode = (mode + 1) % 4;
modeBtn.textContent = `${modeIcons[mode]} Mode: ${modeLabels[mode]}`;
};
playlistBtn.onclick = () => {
playlistDiv.style.display = playlistDiv.style.display === "none" ? "block" : "none";
};
offBtn.onclick = () => {
video.pause();
video.removeAttribute("src");
video.load();
video.style.display = "none";
modeBtn.style.display = "none";
playlistBtn.style.display = "none";
offBtn.style.display = "none";
playlistDiv.innerHTML = "";
playlistDiv.style.display = "none";
videoFiles = [];
currentIndex = 0;
upload.value = "";
};
upload.addEventListener("change", function () {
videoFiles = Array.from(this.files).filter(file => file.type.startsWith("video/"));
if (videoFiles.length > 0) {
currentIndex = 0;
showPlaylist();
video.style.display = "block";
modeBtn.style.display = "inline";
playlistBtn.style.display = "inline";
offBtn.style.display = "inline";
}
});
function showPlaylist() {
playlistDiv.innerHTML = "";
videoFiles.forEach((file, index) => {
const span = document.createElement("span");
span.textContent = file.name;
span.onclick = () => {
currentIndex = index;
playVideo(index);
};
playlistDiv.appendChild(span);
});
highlightPlaylist();
playlistDiv.style.display = "block";
}
function highlightPlaylist() {
const items = playlistDiv.querySelectorAll("span");
items.forEach((span, idx) => {
span.className = (idx === currentIndex) ? "active" : "";
});
}
function playVideo(index) {
if (!videoFiles[index]) return;
const url = URL.createObjectURL(videoFiles[index]);
video.pause();
video.src = url;
video.load();
video.play();
highlightPlaylist();
}
video.addEventListener("ended", () => {
if (mode === 0) {
currentIndex = (currentIndex - 1 + videoFiles.length) % videoFiles.length;
playVideo(currentIndex);
} else if (mode === 1) {
playVideo(currentIndex);
} else if (mode === 2) {
currentIndex = Math.floor(Math.random() * videoFiles.length);
playVideo(currentIndex);
} else if (mode === 3) {
video.pause();
video.removeAttribute("src");
video.load();
}
});
})();
</script>
</body>
</html>