Ogestan_Drossagyn_Papilocare/Ogestan_andractiv/contenido/05.html

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

    .play-button-container {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        z-index: 10002;
        background-color: rgb(111 156 202);
        border-radius: 12px;
    }

    #video {
        z-index: 99;
        border-radius: 15px;
    }

    .play-button-container button {
        pointer-events: all;
        border: none;
        background: none;
        cursor: pointer;
        width: 25%;
    }
</style>
<div class="page-sco full-page-sco back0 w-100 pt-2 pt-md-0">
    <div class="container">
        <div class="row justify-content-center align-items-center">
            <div class="col-12">
                <div class="row justify-content-center">
                    <div class="col-12 mb-3 text-center animate__animated animate__bounceInDown">
                        <h2 class="fw-semibold text-blue-3">Información Nutricional ​</h2>
                    </div>
                    <div class="col-12 col-md-8 col-xl-7 mt-3 mt-md-0 animate__animated animate__zoomIn">
                        <div class="w-100 animate__animated animate__flipInX">
                            <div class="ratio ratio-16x9">
                                <video id="video" class="embed-responsive-item" controls playsinline
                                    poster="video/poster.png">
                                    <source src="video/demo.mp4" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video>
                                <div class="play-button-container">
                                    <button
                                        class="p-0 animate__animated animate__heartBeat animate__infinite waves-effect disabled"
                                        id="btn_video">
                                        <!-- <i class="fa-solid fa-play fa-3x text-white"></i> -->
                                        <img src="img/play-button.png" alt="Play Button" class="img-fluid">
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        "use strict";
        $('body').addClass('fake');

        // const audioh23 = CourseNav.createSound('audio/audioh23.mp3');

        // CourseNav.audioController.stopAllSoundsAndPlay(audioh23);

        // audioh23.on('end', function () {
        //     $("#btn_video").removeClass("disabled");
        // });

        setTimeout(function () {
            $("#btn_video").removeClass("disabled").click();
        }, 200);

        var video = document.getElementById("video");
        var btnVideo = document.getElementById("btn_video");

        // Evitar la reproducción del video al hacer clic en el botón de reproducción
        btnVideo.addEventListener("click", function (event) {
            if (!btnVideo.classList.contains("disabled")) {
                CourseNav.soundClick();
                document.getElementById("video").play();
                $(".play-button-container").hide(); // Ocultar el contenedor de botón de reproducción
            } else {
                event.stopPropagation(); // Evita que el evento de clic llegue al video
            }
        });

        // Evitar que el video se reproduzca al hacer clic en el área de la capa
        video.addEventListener("click", function (event) {
            if (!btnVideo.classList.contains("disabled")) {
                event.preventDefault(); // Evita la acción predeterminada de reproducción del video
            }
        });

        // Evitar la reproducción del video al hacer doble clic en cualquier parte del video
        video.addEventListener("dblclick", function (event) {
            if (!btnVideo.classList.contains("disabled")) {
                event.preventDefault(); // Evita la acción predeterminada de reproducción del video
            }
        });

        video.addEventListener("ended", function () {
            CourseNav.setSlideVisited();
        });
    });
</script>