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> |