117 lines
4.4 KiB
HTML
117 lines
4.4 KiB
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> |