Bilgisayarınızdan seçtiğiniz mp4 videolarınızı izlemeniz için küçük bir proje
<!DOCTYPE html>
<html lang=”tr”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Video Oynatıcı</title>
<style>
body {
display: flex;
background-color: #282c34;
color: white;
font-family: Arial, sans-serif;
margin: 0;
}
#musicList {
max-width: 300px;
padding: 20px;
text-align: center;
display: block;
}
#musicPlayer {
text-align: center;
flex: 1;
}
video {
width: 100%;
margin-top: 20px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 10px;
cursor: pointer;
transition: color 0.3s;
}
li:hover {
color: #61dafb;
}
#currentMusic {
margin-top: 20px;
}
#buttonContainer {
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
#nextButton,
#prevButton,
#nextPlaylistButton,
#prevPlaylistButton,
#selectFolderButton,
#basePathInput {
background-color: #61dafb;
color: white;
padding: 10px;
border: none;
cursor: pointer;
transition: background-color 0.3s;
margin: 0 10px;
}
#nextButton:hover,
#prevButton:hover,
#nextPlaylistButton:hover,
#prevPlaylistButton:hover,
#selectFolderButton:hover,
#basePathInput:hover {
background-color: #45a5f5;
}
#totalRecords {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
#recordCount {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
#mobileMenu {
display: none;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #282c34;
padding: 20px;
z-index: 1;
}
#mobileMenuButton {
background-color: #61dafb;
color: white;
padding: 10px;
border: none;
cursor: pointer;
transition: background-color 0.3s;
margin-bottom: 20px;
position: fixed;
top: 10px;
left: 10px;
z-index: 2;
}
#mobileMenuButton:hover {
background-color: #45a5f5;
}
#mobilePlaylist {
display: none;
margin-top: 20px;
}
@media screen and (max-width: 600px) {
#musicList {
display: none;
}
#musicPlayer {
order: -1;
}
#buttonContainer {
flex-direction: row;
}
#nextPlaylistButton,
#prevPlaylistButton {
display: none;
}
#mobileMenuButton {
display: block;
}
#mobileMenu {
display: flex;
}
#mobilePlaylist {
display: block;
}
}
@media screen and (min-width: 601px) {
#mobileMenuButton {
display: none;
}
#mobileMenu {
display: none;
}
}
</style>
</head>
<body>
<div id=”musicList”>
<h1>Video Listesi</h1>
<p id=”totalRecords”>Toplam Kayıt Sayısı:</p>
<p id=”recordCount”></p>
<ul id=”playlist”></ul>
<div id=”buttonContainer”>
<button id=”prevPlaylistButton”>Önceki Liste</button>
<button id=”nextPlaylistButton”>Sonraki Liste</button>
<input type=”file” id=”selectFolderButton” webkitdirectory directory multiple />
<style>
.gizle{
display:none;
}
</style>
<div class=”gizle”>
<input type=”text” id=”basePathInput” size=”20″ value=”path/to/music/” placeholder=”Video Dizini”>
</div></div>
</div>
<div id=”musicPlayer”>
<h1>Video İzle</h1>
<video controls id=”videoPlayer”></video>
<div id=”currentMusic”></div>
<div id=”buttonContainer”>
<button id=”prevButton”>Geri</button>
<button id=”nextButton”>İleri</button>
</div>
</div>
<button id=”mobileMenuButton”>☰</button>
<div id=”mobileMenu”>
<ul id=”mobilePlaylist”></ul>
</div>
<script>
document.addEventListener(‘DOMContentLoaded’, function () {
var musicList = [];
var videoBasePath = ”; // Değişken dosya yolu tanımlanıyor
var totalRecords = document.getElementById(‘totalRecords’);
var recordCount = document.getElementById(‘recordCount’);
var playlist = document.getElementById(‘playlist’);
var videoPlayer = document.getElementById(‘videoPlayer’);
var currentMusicIndex = 0;
var currentMusicElement = document.getElementById(‘currentMusic’);
var nextButton = document.getElementById(‘nextButton’);
var prevButton = document.getElementById(‘prevButton’);
var nextPlaylistButton = document.getElementById(‘nextPlaylistButton’);
var prevPlaylistButton = document.getElementById(‘prevPlaylistButton’);
var selectFolderButton = document.getElementById(‘selectFolderButton’);
var basePathInput = document.getElementById(‘basePathInput’);
var mobileMenuButton = document.getElementById(‘mobileMenuButton’);
var mobileMenu = document.getElementById(‘mobileMenu’);
var mobilePlaylist = document.getElementById(‘mobilePlaylist’);
var currentPage = 0;
var recordsPerPage = 10;
selectFolderButton.addEventListener(‘change’, function (e) {
var files = e.target.files;
if (files.length > 0) {
musicList = Array.from(files).map(file => file.name);
videoBasePath = files[0].webkitRelativePath.replace(files[0].name, ”);
basePathInput.value = videoBasePath;
displayPlaylist();
}
});
basePathInput.addEventListener(‘click’, function () {
basePathInput.value = ”;
});
selectFolderButton.addEventListener(‘click’, function () {
basePathInput.value = ”;
});
function playMusic(index) {
console.log(“Selected Index:”, index);
videoPlayer.src = videoBasePath + musicList[index];
videoPlayer.load();
videoPlayer.play();
currentMusicIndex = index;
updateCurrentMusic();
}
function updateCurrentMusic() {
var listItems = playlist.getElementsByTagName(‘li’);
for (var i = 0; i < listItems.length; i++) {
listItems[i].style.color = ”;
}
var currentListItem = playlist.getElementsByTagName(‘li’)[currentMusicIndex – currentPage * recordsPerPage];
currentListItem.style.color = ‘#61dafb’;
currentMusicElement.textContent = ‘Oynatılan Video: ‘ + musicList[currentMusicIndex];
}
videoPlayer.addEventListener(‘timeupdate’, function () {
if (videoPlayer.currentTime >= videoPlayer.duration – 1) {
playNextMusic();
}
});
nextButton.addEventListener(‘click’, function () {
playNextMusic();
});
prevButton.addEventListener(‘click’, function () {
playPrevMusic();
});
nextPlaylistButton.addEventListener(‘click’, function () {
currentPage = (currentPage + 1) % Math.ceil(musicList.length / recordsPerPage);
displayPlaylist();
});
prevPlaylistButton.addEventListener(‘click’, function () {
currentPage = (currentPage – 1 + Math.ceil(musicList.length / recordsPerPage)) % Math.ceil(musicList.length / recordsPerPage);
displayPlaylist();
});
mobileMenuButton.addEventListener(‘click’, function () {
mobileMenu.style.display = mobileMenu.style.display === ‘flex’ ? ‘none’ : ‘flex’;
});
function playNextMusic() {
currentMusicIndex = (currentMusicIndex + 1) % musicList.length;
playMusic(currentMusicIndex);
}
function playPrevMusic() {
currentMusicIndex = (currentMusicIndex – 1 + musicList.length) % musicList.length;
playMusic(currentMusicIndex);
}
function displayPlaylist() {
var start = currentPage * recordsPerPage;
var end = start + recordsPerPage;
var currentList = musicList.slice(start, end);
playlist.innerHTML = ”;
currentList.forEach(function (musicFile, index) {
var listItem = document.createElement(‘li’);
listItem.textContent = musicFile;
listItem.addEventListener(‘click’, function () {
playMusic(index + start);
// Mobil menüyü kapat
mobileMenu.style.display = ‘none’;
});
playlist.appendChild(listItem);
});
updateCurrentMusic();
updateRecordCount();
// Mobil menü içeriğini güncelle
mobilePlaylist.innerHTML = ”;
musicList.forEach(function (musicFile, index) {
var mobileListItem = document.createElement(‘li’);
mobileListItem.textContent = musicFile;
mobileListItem.addEventListener(‘click’, function () {
playMusic(index);
// Mobil menüyü kapat
mobileMenu.style.display = ‘none’;
});
mobilePlaylist.appendChild(mobileListItem);
});
}
function updateRecordCount() {
totalRecords.textContent = ‘Toplam Kayıt Sayısı: ‘ + musicList.length;
recordCount.textContent = (currentPage * recordsPerPage + 1) + ‘ – ‘ + Math.min((currentPage + 1) * recordsPerPage, musicList.length) + ‘ / ‘ + musicList.length;
}
displayPlaylist();
});
</script>
</body>
</html>