113 lines
4.5 KiB
HTML
113 lines
4.5 KiB
HTML
|
<style>
|
|||
|
|
.fake {
|
|||
|
|
background-image: url(img/bg08.webp);
|
|||
|
|
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: rgba(0, 0, 0, 0.5);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#video {
|
|||
|
|
z-index: 99;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.play-button-container button {
|
|||
|
|
pointer-events: all;
|
|||
|
|
border: none;
|
|||
|
|
background: none;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<div class="page-sco full-page-sco 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">
|
|||
|
|
<h1 class="fw-bold text-white text-center text-white">Me acompañó, no solo me afilió</h1>
|
|||
|
|
<p class="animate__animated animate__lightSpeedInLeft animate__delay-2s">Erika no fue
|
|||
|
|
convencida. Fue escuchada, comprendida… y eso la llevó a decir que sí.<br>
|
|||
|
|
Descubre cómo una conversación sin presión puede abrir una puerta real.</p>
|
|||
|
|
</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/V1 M2 - Me Acompanio, No Me Vendio_V4.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>
|
|||
|
|
</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");
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
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>
|