.custom-player-container {
background-color: #11141a;
padding: 15px;
border-radius: 12px;
box-shadow: 0px 10px 30px rgba(0,0,0,0.5);
max-width: 800px;
margin: 0 auto;
}
.custom-player-container video {
border-radius: 8px;
background-color: #000;
}
.custom-video-menu {
display: flex;
justify-content: space-around;
align-items: center;
background: linear-gradient(180deg, #242933 0%, #171b22 100%);
padding: 15px 10px;
border-radius: 10px;
margin-top: 15px;
}
.menu-btn {
background: none;
border: none;
color: #a0a5b5;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
transition: all 0.2s ease;
}
.menu-btn:hover { color: #ffffff; }
.btn-icon {
width: 50px;
height: 50px;
background-color: #2e3542;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #fff;
position: relative;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
.btn-text {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
}
/* Estilo específico Botón STOP */
.btn-stop .btn-icon { background-color: #d93838; }
.btn-stop .btn-text { color: #d93838; }
/* Estilo específico Botón REPEAT (Activo por defecto) */
.active-loop .btn-icon {
background-color: #3b4556;
border: 2px solid #52627a;
}
.check-mark {
position: absolute;
bottom: -2px;
right: -2px;
background: #2ecc71;
color: white;
font-size: 10px;
width: 15px;
height: 15px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
document.addEventListener("DOMContentLoaded", function() {
const video = document.getElementById('my-custom-video');
const playPauseBtn = document.getElementById('btn-play-pause');
const playPauseIcon = document.getElementById('play-pause-icon');
const speedBtn = document.getElementById('btn-speed');
const repeatBtn = document.getElementById('btn-repeat');
// 1. Play / Pausa Juntos
playPauseBtn.addEventListener('click', function() {
if (video.paused) {
video.play();
playPauseIcon.textContent = "Ⅱ"; // Icono Pausa
} else {
video.pause();
playPauseIcon.textContent = "▶"; // Icono Play
}
});
// 2. Velocidad 0.5x alternable
speedBtn.addEventListener('click', function() {
if (video.playbackRate === 1.0) {
video.playbackRate = 0.5;
speedBtn.style.color = "#2ecc71"; // Se pone verde si está lento
} else {
video.playbackRate = 1.0;
speedBtn.style.color = "";
}
});
// 3. Activar/Desactivar Bucle (viene marcado por defecto gracias al HTML 'loop')
repeatBtn.addEventListener('click', function() {
if (video.loop) {
video.loop = false;
repeatBtn.classList.remove('active-loop');
document.querySelector('.check-mark').style.display = 'none';
} else {
video.loop = true;
repeatBtn.classList.add('active-loop');
document.querySelector('.check-mark').style.display = 'flex';
}
});
});
