Esta documentação detalha como os usuários podem acessar e incorporar o player de vídeo do site roxanoplay.bb-bet.top em seus próprios sites. O player utiliza a biblioteca Video.js e serve o conteúdo de vídeo através de scripts PHP que atuam como proxies.
O player do RoxanoPlay é construído sobre a biblioteca de código aberto Video.js [1], que oferece uma base robusta para players de vídeo web. O conteúdo de vídeo em si não é servido diretamente, mas sim através de scripts PHP (proxys.php para séries/TV e hostmov.php para filmes) que atuam como proxies. Esses scripts são responsáveis por:
Para incorporar o player, é fundamental entender como as URLs de conteúdo são estruturadas. Existem dois tipos principais de URLs, dependendo se o conteúdo é uma série/TV ou um filme.
tv.php)O player para séries e TV utiliza o script proxys.php para servir o vídeo. A URL do player segue o formato:
https://roxanoplay.bb-bet.top/pages/tv.php?id={ID_DA_SERIE}
O {ID_DA_SERIE} pode ser fornecido em dois formatos:
{TMDB_ID_DA_SERIE}/{NUMERO_DA_TEMPORADA}/{NUMERO_DO_EPISODIO}https://roxanoplay.bb-bet.top/pages/tv.php?id=107671/1/1 (para a série com TMDB ID 107671, temporada 1, episódio 1).O tv.php então passa este ID_DA_SERIE para o proxys.php através do atributo src da tag <source> do vídeo:
<source src="proxys.php?id=<?= htmlspecialchars($id) ?>" type="video/mp4">
mov.php)O player para filmes utiliza o script hostmov.php para servir o vídeo. A URL do player segue o formato:
https://roxanoplay.bb-bet.top/pages/mov.php?id={ID_DO_FILME}
O {ID_DO_FILME} pode ser fornecido em dois formatos:
{TMDB_ID_DO_FILME}https://roxanoplay.bb-bet.top/pages/mov.php?id=811596 (para o filme com TMDB ID 811596).sem_tmdb_.O mov.php então passa este ID_DO_FILME para o hostmov.php através do atributo src da tag <source> do vídeo:
<source src="hostmov.php?id=<?= htmlspecialchars($id) ?>" type="video/mp4">
Existem duas maneiras principais de incorporar o player do RoxanoPlay em seu site:
<iframe> (Recomendado)O método mais simples e recomendado é usar um <iframe>. Isso isola o player em seu próprio contexto, minimizando conflitos de estilo ou script com seu site. Basta usar a URL completa do player (tv.php ou mov.php) como o atributo src do <iframe>.
Exemplo para Séries/TV:
<iframe
src="https://roxanoplay.bb-bet.top/pages/tv.php?id=107671/1/1"
width="100%"
height="500px"
frameborder="0"
allowfullscreen
webkitallowfullscreen
mozallowfullscreen
oallowfullscreen
msallowfullscreen
></iframe>
Exemplo para Filmes:
<iframe
src="https://roxanoplay.bb-bet.top/pages/mov.php?id=811596"
width="100%"
height="500px"
frameborder="0"
allowfullscreen
webkitallowfullscreen
mozallowfullscreen
oallowfullscreen
msallowfullscreen
></iframe>
Parâmetros do <iframe>:
src: A URL completa do player (tv.php ou mov.php) com o id do conteúdo.width, height: Defina as dimensões desejadas para o player. 100% é comum para responsividade.frameborder: Remove a borda.allowfullscreen, webkitallowfullscreen, mozallowfullscreen, oallowfullscreen, msallowfullscreen: Permitem que o player entre em modo de tela cheia em diferentes navegadores.Para usuários mais avançados que desejam maior controle sobre o player e integração mais profunda com seu site, é possível incorporar o player diretamente. Este método requer a inclusão dos scripts e estilos do Video.js, além da estrutura HTML e JavaScript necessários.
Passo 1: Incluir os Estilos e Scripts do Video.js
Adicione os seguintes links e scripts na seção <head> do seu HTML:
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet">
<link href="https://unpkg.com/@videojs/themes@1/dist/forest/index.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
Passo 2: Estrutura HTML do Player
Adicione a tag <video> onde você deseja que o player apareça. Certifique-se de que o id da tag <video> seja video-player e inclua a classe video-js vjs-theme-forest.
Exemplo para Séries/TV:
<video id="video-player" class="video-js vjs-theme-forest" controls preload="auto" playsinline webkit-playsinline>
<source src="https://roxanoplay.bb-bet.top/pages/proxys.php?id=107671/1/1" type="video/mp4">
</video>
Exemplo para Filmes:
<video id="video-player" class="video-js vjs-theme-forest" controls preload="auto" playsinline webkit-playsinline>
<source src="https://roxanoplay.bb-bet.top/pages/hostmov.php?id=811596" type="video/mp4">
</video>
Observações Importantes:
src da tag <source> deve apontar para o script proxy (proxys.php ou hostmov.php) com o id do conteúdo desejado. Não use as URLs tv.php ou mov.php diretamente aqui, pois elas são páginas HTML completas e não o stream de vídeo.controls: Exibe os controles padrão do player.preload="auto": Inicia o carregamento do vídeo assim que a página é carregada.playsinline webkit-playsinline: Permite que o vídeo seja reproduzido inline em dispositivos móveis, em vez de entrar automaticamente em tela cheia.Passo 3: Inicialização do Video.js e Configurações Adicionais
Adicione o seguinte script JavaScript (preferencialmente antes do fechamento da tag </body>) para inicializar o Video.js e aplicar as configurações personalizadas do RoxanoPlay. Lembre-se de substituir VIDEO_ID_AQUI pelo ID real do seu conteúdo (o mesmo id que você usou na URL do proxys.php ou hostmov.php).
document.addEventListener('DOMContentLoaded', function() {
const videoId = 'VIDEO_ID_AQUI'; // Substitua pelo ID do seu conteúdo (ex: '107671/1/1' ou '811596')
const player = videojs('video-player', {
preload: 'auto',
html5: { vhs: { enableLowInitialPlaylist: true, smoothQualityChange: true, useBandwidthFromLocalStorage: true }},
fluid: true, responsive: true,
playbackRates: [0.5, 1, 1.5, 2], inactivityTimeout: 3000,
controlBar: {
children: [
'playToggle', 'volumePanel', 'currentTimeDisplay', 'timeDivider',
'durationDisplay', 'progressControl', 'customControlSpacer',
'playbackRateMenuButton', 'fullscreenToggle',
],
},
});
// --- MODAL "CONTINUAR A ASSISTIR" ---
const storageKey = `video-progress-${videoId}`;
const modal = document.getElementById('continue-modal');
player.one('loadedmetadata', () => {
const savedTime = parseFloat(localStorage.getItem(storageKey));
if (savedTime && savedTime > 10 && savedTime < player.duration() - 20) {
modal.style.display = 'block';
document.getElementById('continue-yes').onclick = () => {
player.currentTime(savedTime);
modal.style.display = 'none';
player.play();
};
document.getElementById('continue-no').onclick = () => {
localStorage.removeItem(storageKey);
modal.style.display = 'none';
player.play();
};
} else {
player.play();
}
});
player.on('timeupdate', () => {
if (player.currentTime() > 10) localStorage.setItem(storageKey, player.currentTime());
});
player.on('ended', () => localStorage.removeItem(storageKey));
// --- DUPLO TOQUE PARA AVANÇAR/RECUAR ---
let lastTap = 0;
player.on('touchstart', (event) => {
if (event.target.closest('.vjs-control-bar')) return; // Ignora toques na barra
const currentTime = new Date().getTime();
const tapLength = currentTime - lastTap;
if (tapLength < 300 && tapLength > 0) {
const rect = player.el().getBoundingClientRect();
const tapX = event.touches[0].clientX - rect.left;
const feedbackLeft = document.querySelector('.vjs-double-tap-feedback.left');
const feedbackRight = document.querySelector('.vjs-double-tap-feedback.right');
if (tapX < rect.width / 3) {
player.currentTime(player.currentTime() - 10);
feedbackLeft.classList.add('show');
setTimeout(() => feedbackLeft.classList.remove('show'), 600);
} else if (tapX > rect.width * 2 / 3) {
player.currentTime(player.currentTime() + 10);
feedbackRight.classList.add('show');
setTimeout(() => feedbackRight.classList.remove('show'), 600);
} else {
player.paused() ? player.play() : player.pause();
}
event.preventDefault();
}
lastTap = currentTime;
});
// --- BOTÕES DE AVANÇO E RECUO NA BARRA ---
const controlBar = player.controlBar;
const fullscreenToggle = controlBar.getChild('fullscreenToggle');
controlBar.addChild('button', {
controlText: 'Recuar 10s', className: 'vjs-custom-button vjs-icon-replay-10',
clickHandler: () => player.currentTime(player.currentTime() - 10)
}, controlBar.children().indexOf(fullscreenToggle));
controlBar.addChild('button', {
controlText: 'Avançar 10s', className: 'vjs-custom-button vjs-icon-forward-10',
clickHandler: () => player.currentTime(player.currentTime() + 10)
}, controlBar.children().indexOf(fullscreenToggle));
// --- ATALHOS DE TECLADO COMPLETOS ---
player.on('keydown', (event) => {
event.preventDefault();
switch(event.code) {
case 'Space': player.paused() ? player.play() : player.pause(); break;
case 'ArrowRight': player.currentTime(player.currentTime() + 10); break;
case 'ArrowLeft': player.currentTime(player.currentTime() - 10); break;
case 'ArrowUp': player.volume(Math.min(1, player.volume() + 0.1)); break;
case 'ArrowDown': player.volume(Math.max(0, player.volume() - 0.1)); break;
case 'KeyF': player.isFullscreen() ? player.exitFullscreen() : player.requestFullscreen(); break;
case 'KeyM': player.muted(!player.muted()); break;
}
});
// --- BOTÃO DE DOWNLOAD ---
document.getElementById('download-btn').onclick = () => {
window.open(`https://roxanoplay.bb-bet.top/pages/proxys.php?id=${videoId}&download=1`, '_blank'); // Ajuste a URL do proxy conforme necessário
};
});
roxanoplay.bb-bet.top possui detecção de AdBlock. Ao incorporar o player, certifique-se de que os usuários estejam cientes de que o player pode não funcionar corretamente se um AdBlocker estiver ativo.fluid: true, responsive: true). Certifique-se de que o contêiner onde o player está inserido também seja responsivo para garantir a melhor experiência em diferentes dispositivos.<iframe> oferece um nível maior de isolamento.[1] Video.js. Disponível em: https://videojs.com/