PRUEBAS

·VOLVER ATRÁS

·Prueba de transmisión M3U8

·Reproductor m3u8

Tu navegador no soporta la reproducción de video.

</video>

document.addEventListener('DOMContentLoaded', function () {

var video = document.getElementById('myVideoPlayer');

var videoSrc = 'https://cloudvideo.servers10.com:8081/8120/tracks-v1a1/mono.m3u8';

if (Hls.isSupported()) {

var hls = new Hls();

hls.loadSource(videoSrc);

hls.attachMedia(video);

hls.on(Hls.Events.MANIFEST_PARSED, function () {

video.play();

});

} else if (video.canPlayType('application/vnd.apple.mpegurl')) {

video.src = videoSrc;

video.addEventListener('loadedmetadata', function () {

video.play();

});

}

});

</script>

·Prueba de Transmisión TVCABLE1

·Reproductor tvcable 1

</iframe>

·Prueba de Transmisión TVCABLE2

·Reproductor tvcable 2

<style>

/* Contenedor del reproductor */

.player-container {

position: relative;

width: 100%;

height: 100%;

}

/* Reproductor iframe */

iframe#video-player {

width: 100%;

height: 100%;

border: none;

}

/* Máscara superior para bloquear clics */

.block-top-area {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 40%; /* Bloquea el 40% superior */

z-index: 10;

background: transparent; /* Invisible */

pointer-events: all; /* Bloquea clics */

}

</style>

</div>

// Configuración del reproductor

const width = "100%";

const height = "100%";

const id = "history";

// Generar el iframe dinámicamente

const playerContainer = document.querySelector(".player-container");

const iframe = document.createElement("iframe");

iframe.setAttribute("allowfullscreen", "true");

iframe.setAttribute("width", width);

iframe.setAttribute("height", height);

iframe.setAttribute("scrolling", "no");

iframe.setAttribute("frameborder", "0");

iframe.setAttribute("marginwidth", "0");

iframe.setAttribute("marginheight", "0");

iframe.setAttribute("allowtransparency", "true");

iframe.setAttribute(

"src",

`https://embed.sdfgnksbounce.com/embed/${id}.html`

);

iframe.id = "video-player";

// Aplicar el atributo sandbox para restringir el contenido del iframe

iframe.setAttribute("sandbox", "allow-scripts allow-same-origin");

// Añadir el iframe al contenedor

playerContainer.appendChild(iframe);

// Bloqueo de clics en la máscara superior

document.querySelector(".block-top-area").addEventListener("click", function (e) {

e.preventDefault();

e.stopPropagation();

console.log("Clic bloqueado en el 40% superior del reproductor");

});

// Bloqueo de redirecciones y anuncios

function blockAdsAndRedirects() {

// Bloquear cualquier intento de abrir una nueva ventana emergente

window.open = function () {

console.log("Intento de abrir una ventana emergente bloqueado");

return null;

};

// Bloquear los anuncios dentro del iframe

const iframeDocument = iframe.contentWindow.document;

// Utilizar MutationObserver para ocultar los anuncios antes de que aparezcan

const observer = new MutationObserver(function () {

const ads = iframeDocument.querySelectorAll('.ad, .advertisement, .popup, iframe[src*="ads"], iframe[src*="advertisement"]');

ads.forEach(function (ad) {

ad.style.display = 'none'; // Ocultar los anuncios

console.log("Publicidad bloqueada");

});

// Observador de cambios en el iframe para bloquear anuncios dinámicos

observer.observe(iframeDocument.body, { childList: true, subtree: true });

// Bloquear redireccionamientos dentro del iframe

iframe.contentWindow.location = "about:blank"; // Impide redirecciones

// Evitar abrir enlaces dentro del iframe en una nueva ventana

iframeDocument.querySelectorAll('a').forEach(function (link) {

link.setAttribute('target', '_self');

link.addEventListener('click', function (e) {

e.preventDefault(); // Bloquear redirecciones

console.log("Redirección bloqueada dentro del iframe");

});

}

// Esperar a que el iframe se haya cargado

iframe.onload = function () {

// Ejecutar la función de bloqueo de anuncios y redirecciones

blockAdsAndRedirects();

};

</script>

·Prueba de Transmisión YouTube reproductor propio

Reproductor con controles personalizados

Volumen: 30

·Reproductor propio para transmisiones de YouTube

<title>Reproductor con controles personalizados</title>

<style>

#player-container {

position: relative;

width: 100%;

max-width: 800px;

height: 450px;

margin: auto;

background-color: #000;

overflow: hidden;

}

#overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0);

z-index: 15;

}

#player {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

#progress-bar {

width: 100%;

height: 5px;

background-color: rgba(255, 255, 255, 0.3);

position: absolute;

bottom: 60px;

left: 0;

cursor: pointer;

z-index: 18;

transition: opacity 0.5s ease-in-out;

}

#progress {

width: 0;

height: 100%;

background-color: #007bff;

position: absolute;

top: 0;

right: 0;

transition: width 0.1s;

}

#progress-pointer {

width: 15px;

height: 15px;

background-color: #007bff;

border-radius: 50%;

position: absolute;

top: -5px;

right: 0;

cursor: pointer;

transition: left 0.1s;

z-index: 20;

}

#controls {

position: absolute;

bottom: 10px;

left: 10px;

right: 10px;

display: flex;

justify-content: space-between;

z-index: 20;

transition: opacity 0.5s ease-in-out;

width: calc(100% - 20px);

}

#controls.hidden {

opacity: 0;

}

button {

background-color: rgba(255, 255, 255, 0.7);

border: none;

padding: 10px;

cursor: pointer;

color: #000;

font-size: 18px;

border-radius: 50%;

transition: background-color 0.3s, transform 0.3s;

}

button:hover {

background-color: rgba(255, 255, 255, 1);

transform: scale(1.1);

}

#volume-display {

color: #fff;

font-size: 16px;

padding-left: 10px;

align-self: center;

}

.icon {

font-size: 20px;

}

/* Ocultar puntero en pantalla completa */

body:fullscreen, html:fullscreen {

cursor: none;

}

</style>

<div>

</div>

<div>

</button>

</button>

</button>

<span>Volumen: 30</span>

</button>

</div>

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

var seeking = false;

var hideControlsTimeout;

var controlsHidden = false;

var hideProgressTimeout;

var progressHidden = false;

var hideCursorTimeout;

var cursorHidden = false;

var inactivityTimeout;

function onYouTubeIframeAPIReady() {

// Verificar si el usuario está logueado usando localStorage

var isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';

player = new YT.Player('player', {

height: '450',

width: '800',

videoId: 'sgEJ4sOwboM',

playerVars: {

modestbranding: 1,

rel: 0,

showinfo: 0,

controls: 0,

iv_load_policy: 3,

quality: 'hd1080',

disablekb: 1,

hd: 1,

autoplay: isLoggedIn ? 1 : 0, // Solo autoplay si el usuario está logueado

},

events: {

'onStateChange': onPlayerStateChange,

'onPlaybackQualityChange': adjustQuality,

'onPlaybackRateChange': updateProgressBar

}

});

// Configurar volumen al 30% cuando el reproductor esté listo

player.addEventListener('onReady', function() {

player.setVolume(30);

document.getElementById('volume-display').innerText = 'Volumen: 30';

});

}

function onPlayerStateChange(event) {

if (event.data == YT.PlayerState.PLAYING) {

setInterval(updateProgressBar, 100);

} else {

clearInterval(updateProgressBar);

}

function togglePlay() {

var playPauseBtn = document.getElementById('play-pause-btn');

var icon = playPauseBtn.querySelector('.icon');

if (player.getPlayerState() === YT.PlayerState.PLAYING) {

player.pauseVideo();

icon.classList.remove('fa-pause');

icon.classList.add('fa-play');

} else {

player.playVideo();

icon.classList.remove('fa-play');

icon.classList.add('fa-pause');

}

function changeVolume(amount) {

var currentVolume = player.getVolume();

var newVolume = Math.min(100, Math.max(0, currentVolume + amount));

player.setVolume(newVolume);

document.getElementById('volume-display').innerText = 'Volumen: ' + newVolume;

}

function toggleFullscreen() {

var playerElement = document.getElementById('player-container');

if (!document.fullscreenElement) {

playerElement.requestFullscreen();

startHideControlsTimeout(); // Inicia el temporizador para ocultar controles

startHideProgressTimeout(); // Inicia el temporizador para ocultar barra de progreso

startHideCursorTimeout(); // Inicia el temporizador para ocultar el puntero

} else {

document.exitFullscreen();

clearTimeout(hideControlsTimeout); // Detiene el temporizador de controles

clearTimeout(hideProgressTimeout); // Detiene el temporizador de barra de progreso

clearTimeout(hideCursorTimeout); // Detiene el temporizador de puntero

showControls(); // Muestra los controles

showProgress(); // Muestra la barra de progreso

showCursor(); // Muestra el cursor

}

function adjustQuality(event) {

const currentQuality = event.data;

player.setPlaybackQuality('hd1080');

}

function updateProgressBar() {

var progress = document.getElementById('progress');

var duration = player.getDuration();

var currentTime = player.getCurrentTime();

var progressPercentage = (currentTime / duration) * 100;

progress.style.width = progressPercentage + '%';

document.getElementById('progress-pointer').style.right = (progressPercentage) + '%';

}

function startSeeking(event) {

seeking = true;

document.addEventListener('mousemove', movePointer);

document.addEventListener('mouseup', stopSeeking);

event.preventDefault();

}

function movePointer(event) {

if (seeking) {

var progressBar = document.getElementById('progress-bar');

var rect = progressBar.getBoundingClientRect();

var x = event.clientX - rect.left;

var progressWidth = rect.width;

var progressPercentage = Math.min(Math.max(0, x / progressWidth), 1) * 100;

document.getElementById('progress').style.width = progressPercentage + '%';

document.getElementById('progress-pointer').style.right = (100 - progressPercentage) + '%';

}

function stopSeeking() {

if (seeking) {

seeking = false;

document.removeEventListener('mousemove', movePointer);

document.removeEventListener('mouseup', stopSeeking);

var progressPercentage = parseFloat(document.getElementById('progress').style.width) / 100;

player.seekTo(player.getDuration() * progressPercentage);

}

function seek(event) {

var progressBar = document.getElementById('progress-bar');

var rect = progressBar.getBoundingClientRect();

var x = event.clientX - rect.left;

var progressWidth = rect.width;

var progressPercentage = (x / progressWidth) * 100;

player.seekTo(player.getDuration() * (progressPercentage / 100));

}

// Funciones para ocultar controles, barra de progreso y puntero

function startHideControlsTimeout() {

hideControlsTimeout = setTimeout(hideControls, 5000);

}

function hideControls() {

if (document.fullscreenElement) {

document.getElementById('controls').classList.add('hidden');

controlsHidden = true;

}

function startHideProgressTimeout() {

hideProgressTimeout = setTimeout(hideProgress, 5000);

}

function hideProgress() {

if (document.fullscreenElement) {

document.getElementById('progress-bar').style.opacity = '0';

progressHidden = true;

}

function startHideCursorTimeout() {

hideCursorTimeout = setTimeout(hideCursor, 5000);

}

function hideCursor() {

if (document.fullscreenElement) {

document.body.style.cursor = 'none';

cursorHidden = true;

}

function showControls() {

document.getElementById('controls').classList.remove('hidden');

controlsHidden = false;

}

function showProgress() {

document.getElementById('progress-bar').style.opacity = '1';

progressHidden = false;

}

function showCursor() {

document.body.style.cursor = 'auto';

cursorHidden = false;

}

// Resetear la visibilidad de los controles cuando el mouse se mueve o el reproductor es tocado

document.addEventListener('mousemove', resetHideTimeouts);

document.getElementById('player').addEventListener('click', resetHideTimeouts);

function resetHideTimeouts() {

if (controlsHidden) {

showControls();

}

if (progressHidden) {

showProgress();

}

if (cursorHidden) {

showCursor();

}

clearTimeout(hideControlsTimeout);

clearTimeout(hideProgressTimeout);

clearTimeout(hideCursorTimeout);

startHideControlsTimeout();

startHideProgressTimeout();

startHideCursorTimeout();

}

</script>