<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Player IPTV com Logos</title>
<!-- Inclua o CSS do Plyr -->
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />
<!-- Inclua o JavaScript do Plyr -->
<script src="https://cdn.plyr.io/3.6.2/plyr.polyfilled.js"></script>
<!-- Inclua o jQuery para facilitar o processamento da lista IPTV -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* Estilos para os canais */
.canal {
display: inline-block; /* Exibe os canais lado a lado */
text-align: center; /* Centraliza o texto e a imagem */
margin: 10px; /* Espaçamento ao redor dos canais */
}
.canal img {
width: 100px; /* Largura da logo */
height: auto; /* Altura automática para manter a proporção */
cursor: pointer; /* Muda o cursor para indicar que é clicável */
}
/* Estilos para o nome do canal */
.nome-canal {
display: block; /* Exibe o nome em uma nova linha */
margin-top: 5px; /* Espaçamento acima do nome */
}
/* Estilos para o contêiner fixo do player */
#player-container {
position: fixed; /* Fixa o contêiner na tela */
top: 10px; /* Distância do topo da tela */
left: 0; /* Alinha o contêiner à esquerda da tela */
right: 0; /* Alinha o contêiner à direita da tela */
z-index: 1000; /* Garante que o contêiner fique acima de outros elementos */
}
/* Estilos para o player dentro do contêiner */
#player {
width: 100%; /* O player preenche a largura do contêiner */
height: auto; /* Altura automática para manter a proporção */
}
/* Estilos para o nome do canal */
.nome-canal {
display: block; /* Exibe o nome em uma nova linha */
margin-top: 5px; /* Espaçamento acima do nome */
word-wrap: break-word; /* Quebra a linha se o nome do canal for muito longo */
max-width: 100px; /* Define a largura máxima para o nome do canal */
}
/* Estilos para a lista de canais */
#lista-canais {
margin-top: 220px; /* Ajuste este valor conforme necessário para criar espaço suficiente abaixo do player */
}
</style>
</head>
<body>
<!-- Contêiner fixo para o player -->
<div id="player-container">
<video id="player" controls playsinline></video>
</div>
<!-- Lista de canais -->
<div id="lista-canais"></div>
<script>
// Substitua 'url_da_sua_lista.m3u' pela URL da sua lista IPTV
const urlDaListaIPTV = 'https://i.mjh.nz/PlutoTV/br.m3u8';
// Inicialize o Plyr
const player = new Plyr('#player');
// Função para processar a lista IPTV e criar os elementos HTML para cada canal
function processarListaIPTV(data) {
const linhas = data.split('\n');
let htmlCanais = '';
for (let i = 0; i < linhas.length; i++) {
if (linhas[i].startsWith('#EXTINF:-1')) {
const partes = linhas[i].split(',');
const nomeCanal = partes[1];
const logoMatch = /tvg-logo="([^"]+)"/.exec(linhas[i]);
const logo = logoMatch ? logoMatch[1] : 'https://i.ibb.co/ScwxfB6/Picsart-24-05-06-14-47-55-394.png'; // Substitua 'logo_padrao.png' pelo caminho do seu logo padrão
const urlCanal = linhas[i + 1].trim();
htmlCanais += `
<div class="canal" onclick="reproduzirCanal('${urlCanal}')">
<img src="${logo}" alt="${nomeCanal}" />
<span class="nome-canal">${nomeCanal}</span>
</div>
`;
}
}
$('#lista-canais').html(htmlCanais);
}
// Função para reproduzir o canal selecionado
function reproduzirCanal(urlCanal) {
player.source = {
type: 'video',
sources: [
{
src: urlCanal,
type: 'application/x-mpegURL'
},
],
};
player.play();
}
// Carrega a lista IPTV e processa
$.get(urlDaListaIPTV, processarListaIPTV);
</script>
</body>
</html>
