HTML Editor

Edita código
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elefantes - Video Interactivo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
            background-color: #f0f8ff;
        }
        #player-container {
            width: 100%;
            max-width: 800px;
            aspect-ratio: 16 / 9;
            position: relative;
            overflow: hidden;
            background-color: #000;
        }
        #player {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        #quiz-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
            text-align: center;
            z-index: 10;
        }
        #rewind-message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 0, 0, 0.8);
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            z-index: 20;
            display: none;
        }
        #timeline {
            width: 100%;
            max-width: 800px;
            height: 20px;
            background-color: #ddd;
            position: relative;
            margin-top: 20px;
        }
        #progress {
            width: 0;
            height: 100%;
            background-color: #4CAF50;
            position: absolute;
            top: 0;
            left: 0;
        }
        .marker {
            position: absolute;
            width: 2px;
            height: 20px;
            background-color: #FF5722;
            z-index: 2;
        }
        button {
            margin: 5px;
            padding: 10px;
            cursor: pointer;
            background-color: #008CBA;
            color: white;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #005f7f;
        }
        #feedback {
            margin-top: 10px;
            font-weight: bold;
        }
        #time-display {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 20px;
            color: #90EE90; /* Verde claro */
            text-shadow: 2px 2px 4px black;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div id="player-container">
        <video id="player" autoplay>
            <source src="videos/elefante.mp4" type="video/mp4">
            Tu navegador no soporta la reproducción de video.
        </video>
        <div id="quiz-container" style="display: none;">
            <h2 id="question"></h2>
            <div id="options"></div>
            <p id="feedback"></p>
        </div>
        <div id="rewind-message">Retroceso por responder mal</div>
        <div id="time-display">00:00/00:00</div> 
    </div>
    <div id="timeline">
        <div id="progress"></div>
    </div>

    <script>
        const player = document.getElementById('player');
        const progress = document.getElementById('progress');
        const timeline = document.getElementById('timeline');
        const rewindMessage = document.getElementById('rewind-message');
        const timeDisplay = document.getElementById('time-display');
        let currentQuestionIndex = 0;

        const questions = [
            {
                time: 10,
                text: "¿Los elefantes son los mamíferos terrestres más grandes del mundo?",
                type: "trueFalse",
                options: ["Verdadero", "Falso"],
                correctAnswer: 0,
                answeredCorrectly: false
            },
            {
                time: 30,
                text: "¿Cuál es la función principal de la trompa del elefante?",
                type: "multipleChoice",
                options: ["Respirar", "Beber agua", "Agarrar objetos", "Todas las anteriores"],
                correctAnswer: 3,
                answeredCorrectly: false
            },
            {
                time: 50,
                text: "¿Cuánto puede pesar un elefante adulto?",
                type: "multipleChoice",
                options: ["1000 kg", "3000 kg", "6000 kg", "9000 kg"],
                correctAnswer: 2,
                answeredCorrectly: false
            }
        ];

        // AÃ±adir marcadores de preguntas a la barra de tiempo
        function setMarkers() {
            // Eliminar solo los marcadores anteriores, no la barra de progreso
            const markers = timeline.querySelectorAll('.marker');
            markers.forEach(marker => marker.remove());

            const videoDuration = player.duration;
            questions.forEach((question, index) => {
                if (!question.answeredCorrectly) {
                    const marker = document.createElement('div');
                    marker.className = 'marker';
                    const position = (question.time / videoDuration) * 100;
                    marker.style.left = `${position}%`;
                    timeline.appendChild(marker);
                }
            });
        }

        // Actualizar barra de progreso
        function updateProgress() {
            const currentTime = player.currentTime;
            const duration = player.duration;
            const progressPercent = (currentTime / duration) * 100;
            progress.style.width = `${progressPercent}%`;

            // Actualizar el tiempo de reproducción en el formato tt/tf
            const currentTimeFormatted = formatTime(currentTime);
            const durationFormatted = formatTime(duration);
            timeDisplay.textContent = `${currentTimeFormatted}/${durationFormatted}`;

            if (!player.paused) {
                requestAnimationFrame(updateProgress);  // Usar requestAnimationFrame para actualizar la barra con fluidez
            }
        }

        // Función para formatear el tiempo en minutos y segundos (MM:SS)
        function formatTime(seconds) {
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = Math.floor(seconds % 60);
            const formattedMinutes = String(minutes).padStart(2, '0');
            const formattedSeconds = String(remainingSeconds).padStart(2, '0');
            return `${formattedMinutes}:${formattedSeconds}`;
        }

        player.addEventListener('timeupdate', checkTime);
        player.addEventListener('loadedmetadata', setMarkers);

        // Pausar o reproducir el video al hacer clic sobre Ã©l
        player.addEventListener('click', () => {
            if (player.paused) {
                player.play();
            } else {
                player.pause();
            }
        });

        function checkTime() {
            const currentTime = Math.floor(player.currentTime);
            if (currentQuestionIndex < questions.length) {
                const question = questions[currentQuestionIndex];
                if (!question.answeredCorrectly && currentTime >= question.time) {
                    player.pause();
                    showQuestion(currentQuestionIndex);
                }
            }
        }

        function showQuestion(index) {
            const quizContainer = document.getElementById('quiz-container');
            const questionEl = document.getElementById('question');
            const optionsEl = document.getElementById('options');
            const feedbackEl = document.getElementById('feedback');

            quizContainer.style.display = 'block';
            questionEl.textContent = questions[index].text;
            optionsEl.innerHTML = '';
            feedbackEl.textContent = '';

            questions[index].options.forEach((option, i) => {
                const button = document.createElement('button');
                button.textContent = option;
                button.onclick = () => checkAnswer(index, i);
                optionsEl.appendChild(button);
            });
        }

        function checkAnswer(questionIndex, answerIndex) {
            const feedbackEl = document.getElementById('feedback');
            const question = questions[questionIndex];
            const quizContainer = document.getElementById('quiz-container');

            if (answerIndex === question.correctAnswer) {
                feedbackEl.textContent = 'Â¡Respuesta correcta!';
                feedbackEl.style.color = 'green';
                question.answeredCorrectly = true;
                setTimeout(() => {
                    quizContainer.style.display = 'none';
                    currentQuestionIndex++;
                    setMarkers();
                    player.play();
                }, 1500);
            } else {
                feedbackEl.textContent = 'Respuesta incorrecta.';
                feedbackEl.style.color = 'red';
                setTimeout(() => {
                    quizContainer.style.display = 'none';
                    const currentTime = player.currentTime;
                    const rewindTime = currentTime / 2;
                    player.currentTime = rewindTime;
                    showRewindMessage();
                    player.play();
                }, 1500);
            }
        }

        function showRewindMessage() {
            rewindMessage.style.display = 'block';
            setTimeout(() => {
                rewindMessage.style.display = 'none';
            }, 2000);
        }

        // Iniciar actualización de progreso cuando el video empieza a reproducir
        player.addEventListener('play', updateProgress);
    </script>
</body>
</html>