Rotafilio_Vantive/contenido/02.html

<style>
    .fake {
        background-image: url(img/bg01.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .hr-style {
        opacity: 1;
        width: 30%;
    }

    #customVideo {
        cursor: pointer;
    }

    .bg-custom {
        background: #b68fb2;
        border-radius: 15px 0px 0px 15px;
    }

    /* Ajustar los controles para que estén en la parte inferior del video */
    .video-controls {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 10 !important;
        background: rgb(255 255 255 / 85%) !important;
        color: var(--bs-primary);
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 8px 12px !important;
    }

    #centerPlayPause {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 20;
        background: var(--bs-primary);
        border-radius: 50%;
        width: 64px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: none;
        cursor: pointer;
        color: rgb(255, 255, 255);
        border: 5px dashed rgb(255, 255, 255);
    }

    /* Mostrar controles al pasar el cursor sobre el video */
    .video-custom:hover .video-controls {
        opacity: 1 !important;
    }

    .video-controls .btn {
        background-color: var(--bs-secondary);
        border: none !important;
        color: var(--bs-primary) !important;
        margin: 0 2px !important;
    }

    .video-controls .btn:hover {
        background-color: var(--bs-primary);
        color: var(--bs-secondary) !important;
    }

    /* Fondo más oscuro para la barra de progreso */
    .video-controls input[type="range"] {
        background: linear-gradient(90deg, #22222233 0%, #44444481 100%) !important;
        border-radius: 8px;
        height: 6px;
    }

    .video-controls input[type="range"]::-webkit-slider-runnable-track {
        background: linear-gradient(90deg, #22222233 0%, #44444481 100%) !important;
        height: 6px;
        border-radius: 8px;
    }

    .video-controls input[type="range"]::-moz-range-track {
        background: linear-gradient(90deg, #22222233 0%, #44444481 100%) !important;
        height: 6px;
        border-radius: 8px;
    }

    .video-controls input[type="range"]::-ms-fill-lower {
        background: #222 !important;
    }

    .video-controls input[type="range"]::-ms-fill-upper {
        background: #444 !important;
    }

    .video-controls input[type="range"]::-webkit-slider-thumb {
        background: var(--bs-primary) !important;
        border: none !important;
        border-radius: 50% !important;
        width: 16px !important;
        height: 16px !important;
    }
</style>
<div class='page-sco py-2 py-md-4 h-100'>
    <div class='container h-100'>
        <div class='row justify-content-center align-items-center h-100'>
            <div class='col-12'>
                <div class='row justify-content-center'>
                    <div class="col-10 text-center">
                        <h2 class="text-primary fw-bold">¿Qué son los riñones?</h2>
                        <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0 mb-3">
                    </div>
                    <div class="col-12">
                        <div class="row justify-content-end">
                            <div class="col-10 px-0">
                                <div class="card border-0 bg-custom">
                                    <div class="card-body d-flex flex-row justify-content-between align-items-center">
                                        <img src="img/2.1.png" alt="Riñones" class="img-fluid mx-3">
                                        <p class="text-white my-0"><b>Instrucciones:</b> Observa el siguiente video para
                                            conocer un poco más
                                            acerca
                                            de los riñones, sus funciones y cómo se manifiesta en ellos la enfermedad
                                            crónica. </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 my-2">
                        <div class="row justify-content-center align-items-center">
                            <div class="col-3">
                                <img src="img/2.2.png" alt="Riñones" class="img-fluid">
                            </div>
                            <div class="col-6">
                                <div class="main-video bg-primary rounded">
                                    <div
                                        class="video-custom rounded overflow-hidden border-0 border-primary shadow-sm position-relative">
                                        <video id="customVideo" class="w-100 h-100" preload="metadata"
                                            poster="img/poster.png" playsinline>
                                            <source src="video/demo.mp4" type="video/mp4">
                                            Tu navegador no soporta el elemento de video.
                                        </video>
                                        <div class="video-controls justify-content-between align-items-center"
                                            style="gap: 8px; display: none;">
                                            <button id="playPauseBtn" class="btn btn-sm rounded-circle"
                                                title="Reproducir/Pausar">
                                                <i class="fa-solid fa-play"></i>
                                            </button>
                                            <input id="videoSeek" type="range" min="0" value="0" step="0.1"
                                                class="form-range flex-grow-1" style="max-width: none;">
                                            <button id="muteBtn" class="btn btn-sm rounded-circle" title="Silenciar">
                                                <i class="fa-solid fa-volume-up"></i>
                                            </button>
                                            <!-- El control de volumen se moverá aquí por JavaScript -->
                                            <button id="fullscreenBtn" class="btn btn-sm rounded-circle"
                                                title="Pantalla completa">
                                                <i class="fa-solid fa-expand"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        'use strict';
        $('body').addClass('fake');
    });

    // Solución definitiva al error de declaración duplicada
    (function () {
        'use strict';

        // Variables y constantes
        const videoElement = document.getElementById('customVideo');
        const playPauseButton = document.getElementById('playPauseBtn');
        const muteButton = document.getElementById('muteBtn');
        const fullscreenButton = document.getElementById('fullscreenBtn');
        const videoSeekBar = document.getElementById('videoSeek');
        const playIconHTML = '<i class="fa-solid fa-play"></i>';
        const pauseIconHTML = '<i class="fa-solid fa-pause"></i>';
        const volumeIconHTML = '<i class="fa-solid fa-volume-up"></i>';
        const muteIconHTML = '<i class="fa-solid fa-volume-mute"></i>';
        const expandIconHTML = '<i class="fa-solid fa-expand"></i>';
        const compressIconHTML = '<i class="fa-solid fa-compress"></i>';

        // Play/Pause
        playPauseButton.addEventListener('click', function () {
            $('.video-controls').show().addClass('d-flex');
            if (videoElement.paused || videoElement.ended) {
                videoElement.play();
            } else {
                videoElement.pause();
            }
        });
        videoElement.addEventListener('play', function () {
            playPauseButton.innerHTML = pauseIconHTML;
        });
        videoElement.addEventListener('pause', function () {
            playPauseButton.innerHTML = playIconHTML;
        });
        videoElement.addEventListener('ended', function () {
            playPauseButton.innerHTML = playIconHTML;
            videoSeekBar.value = 0;
            CourseNav.setSlideVisited();
        });

        // Mute/Unmute
        muteButton.addEventListener('click', function () {
            videoElement.muted = !videoElement.muted;
            muteButton.innerHTML = videoElement.muted ? muteIconHTML : volumeIconHTML;
        });
        videoElement.addEventListener('volumechange', function () {
            muteButton.innerHTML = videoElement.muted ? muteIconHTML : volumeIconHTML;
        });

        // Fullscreen
        fullscreenButton.addEventListener('click', function () {
            if (document.fullscreenElement) {
                document.exitFullscreen();
            } else {
                videoElement.parentElement.requestFullscreen();
            }
        });
        document.addEventListener('fullscreenchange', function () {
            fullscreenButton.innerHTML = document.fullscreenElement ? compressIconHTML : expandIconHTML;
        });

        // Barra de progreso
        videoElement.addEventListener('loadedmetadata', function () {
            videoSeekBar.max = videoElement.duration;
            videoSeekBar.value = 0;
        });
        videoElement.addEventListener('timeupdate', function () {
            videoSeekBar.value = videoElement.currentTime;
        });
        videoSeekBar.addEventListener('input', function () {
            videoElement.currentTime = videoSeekBar.value;
        });
        videoSeekBar.addEventListener('change', function () {
            videoElement.currentTime = videoSeekBar.value;
        });

        // Agregar control de volumen si no existe
        if (!document.getElementById('videoVolume')) {
            const volumeControl = document.createElement('input');
            volumeControl.type = 'range';
            volumeControl.min = '0';
            volumeControl.max = '1';
            volumeControl.step = '0.01';
            volumeControl.value = videoElement.muted ? 0 : videoElement.volume;
            volumeControl.className = 'form-range mx-2';
            volumeControl.style.maxWidth = '100px';
            volumeControl.title = 'Volumen';
            volumeControl.id = 'videoVolume';
            // Mover el control de volumen después del botón mute
            muteButton.parentNode.insertBefore(volumeControl, muteButton.nextSibling);

            // Actualizar el volumen del video al mover el control
            volumeControl.addEventListener('input', function () {
                videoElement.volume = parseFloat(volumeControl.value);
                if (videoElement.volume === 0) {
                    videoElement.muted = true;
                } else {
                    videoElement.muted = false;
                }
            });
            // Sincronizar el control de volumen si el volumen cambia por otros medios
            videoElement.addEventListener('volumechange', function () {
                volumeControl.value = videoElement.muted ? 0 : videoElement.volume;
            });
            // Al hacer mute/unmute, ajustar el rango
            muteButton.addEventListener('click', function () {
                volumeControl.value = videoElement.muted ? 0 : videoElement.volume;
            });
        }

        // Crear el icono central de play/pause
        const centerIcon = document.createElement('div');
        centerIcon.id = 'centerPlayPause';
        // centerIcon.style.position = 'absolute';
        // centerIcon.style.top = '50%';
        // centerIcon.style.left = '50%';
        // centerIcon.style.transform = 'translate(-50%, -50%)';
        // centerIcon.style.zIndex = '20';
        // centerIcon.style.background = 'rgba(255,255,255,0.85)';
        // centerIcon.style.borderRadius = '50%';
        // centerIcon.style.width = '64px';
        // centerIcon.style.height = '64px';
        // centerIcon.style.display = 'flex';
        // centerIcon.style.alignItems = 'center';
        // centerIcon.style.justifyContent = 'center';
        // centerIcon.style.boxShadow = '0 2px 8px rgba(0,0,0,0.2)';
        // centerIcon.style.cursor = 'pointer';
        centerIcon.innerHTML = playIconHTML;
        // Insertar el icono en el contenedor del video
        videoElement.parentNode.style.position = 'relative';
        videoElement.parentNode.appendChild(centerIcon);

        // Mostrar/ocultar el icono según el estado del video
        function updateCenterIcon() {
            if (videoElement.paused || videoElement.ended) {
                centerIcon.innerHTML = playIconHTML;
                centerIcon.style.display = 'flex';
            } else {
                centerIcon.innerHTML = pauseIconHTML;
                centerIcon.style.display = 'none';
            }
        }
        videoElement.addEventListener('play', updateCenterIcon);
        videoElement.addEventListener('pause', updateCenterIcon);
        videoElement.addEventListener('ended', updateCenterIcon);

        // Al hacer clic en el icono central, reproducir/pausar
        centerIcon.addEventListener('click', function () {
            $('.video-controls').show().addClass('d-flex');
            if (videoElement.paused || videoElement.ended) {
                videoElement.play();
            } else {
                videoElement.pause();
            }
        });
        // Inicializar el estado del icono
        updateCenterIcon();

        // Permitir reproducir/pausar al hacer clic sobre el video
        videoElement.addEventListener('click', function (e) {
        $('.video-controls').show().addClass('d-flex');
            // Evitar que el click en los controles active el video
            if (e.target === videoElement) {
                if (videoElement.paused || videoElement.ended) {
                    videoElement.play();
                } else {
                    videoElement.pause();
                }
            }
        });
    })();
</script>