<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canlı TV Yayını</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
}
#urlInput, #titleInput {
width: 80%;
padding: 10px;
margin: 10px 0;
}
#addButton, #loadM3UButton {
padding: 10px 20px;
}
#videoPlayer {
width: 100%;
height: 80vh; /* Ekranın %80'ini kapla */
margin-top: 20px;
display: block;
}
#channelList {
list-style-type: none;
padding: 0;
margin: 20px 0;
max-height: 300px; /* Listeyi kaydırılabilir yapmak için maksimum yükseklik */
overflow-y: auto; /* Yalnızca dikey kaydırma barı */
}
.channelItem {
background: #fff;
margin: 10px 0;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.channelItem:hover {
background-color: #e2e2e2;
}
</style>
</head>
<body>
<h1>Canlı TV Yayını</h1>
<input type="text" id="titleInput" placeholder="Kanal Adını buraya ekleyin...">
<input type="text" id="urlInput" placeholder="M3U8 URL'sini buraya ekleyin...">
<button id="addButton">Ekle</button>
<h2>M3U Dosyası Yükle</h2>
<input type="file" id="m3uFileInput" accept=".m3u">
<button id="loadM3UButton">Yükle</button>
<video id="videoPlayer" controls>
Tarayıcınız video etiketini desteklemiyor.
</video>
<ul id="channelList"></ul>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
document.getElementById('addButton').addEventListener('click', function() {
var titleInput = document.getElementById('titleInput');
var urlInput = document.getElementById('urlInput');
var title = titleInput.value;
var url = urlInput.value;
if (title && url) {
addChannelToList(title, url);
titleInput.value = ''; // Kanal adı alanını temizle
urlInput.value = ''; // URL alanını temizle
} else {
alert('Lütfen hem kanal adı hem de M3U8 URL\'si girin.');
}
});
document.getElementById('loadM3UButton').addEventListener('click', function() {
var fileInput = document.getElementById('m3uFileInput');
var file = fileInput.files[0];
if (file) {
var reader = new FileReader();
reader.onload = function(e) {
var contents = e.target.result;
parseM3U(contents);
};
reader.readAsText(file);
} else {
alert('Lütfen bir M3U dosyası seçin.');
}
});
function parseM3U(m3uContent) {
var lines = m3uContent.split('\n');
var title = '';
var url = '';
for (var i = 0; i < lines.length; i++) {
var line = lines[i].trim();
if (line.startsWith('#EXTINF:')) {
title = line.split(',')[1].trim(); // Kanal adını al
} else if (line && !line.startsWith('#')) {
url = line; // URL'yi al
if (title && url) {
addChannelToList(title, url);
title = ''; // Kanal adını sıfırla
}
}
}
}
function addChannelToList(title, url) {
var channelList = document.getElementById('channelList');
var listItem = document.createElement('li');
listItem.className = 'channelItem';
listItem.textContent = title;
// Kanal tıklanıldığında video oynat
listItem.onclick = function() {
playChannel(url);
};
channelList.appendChild(listItem);
}
function playChannel(url) {
var videoPlayer = document.getElementById('videoPlayer');
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(url);
hls.attachMedia(videoPlayer);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
videoPlayer.style.display = 'block';
videoPlayer.play(); // Oynatmaya başla
});
} else if (videoPlayer.canPlayType('application/vnd.apple.mpegurl')) {
videoPlayer.src = url;
videoPlayer.style.display = 'block';
videoPlayer.play(); // Oynatmaya başla
} else {
alert('Tarayıcınız bu formatı desteklemiyor.');
}
}
</script>
</body>
</html>Selamlar masaüstünüzdeki bu html sayesinde yapabilecekleriniz;
Bu ekranda kanal adını yazıyorsunuz trt ise trt diye ve m3u8 urlsini ekliyorsunuz ekle butonu ile
eklediğimiz kanal alta geldi bastığımızda çalışması lazım
bastık ve çalıştı
isterseniz indirdiğiniz m3u dosyasını yükleyebilirsiniz
kanallar eklenmiş oluyor bastığınız kanal ekranda otomatik oynatır
rahat rahat kanalları izleyebilirsiniz tam ekranda yapabilirsiniz iyi forumlar