0

Estoy realizando una página web. Quisiera que al iniciar la página aparezca el logo de la página durante 2 segundos y luego se mueva a una esquina de la pantalla (esquina superior izquierda) y luego de eso, agregar el atributo autoload al video y empezar a reproducirlo.

$(document).ready(function (e) {
	$("#chivatera_logo").animate({
			top:2%,
			left:2%;
			max-width:10%,
		},500, function(){
			$('.videos_fondos').attr('autoplay');
			$('.videos_fondos').play();
		});
});

$(document).on("mouseover", ".enlaces_paginas", function(e){
	var id=$(this).attr("id");
	if (id=="embarcadero") {
		setInterval($(".videos_fondos").attr('src', './videos/02.mp4'),500);
	}else if(id=="origen"){
		setInterval($(".videos_fondos").attr('src', './videos/03.mp4'),500);
	}else if(id=="plaza"){
		setInterval($(".videos_fondos").attr('src', './videos/04.mp4'),500);
	}else if(id=="ferrocarril"){
		setInterval($(".videos_fondos").attr('src', './videos/05.mp4'),500);
	}else if(id=="galeria"){
		setInterval($(".videos_fondos").attr('src', './videos/06.mp4'),500);
	}else if(id=="equipo"){
		setInterval($(".videos_fondos").attr('src', './videos/07.mp4'),500);
	}
});
#chivatera_logo{
	max-width:50%;
	position:absolute;
	left:23%;
	top:18%;
}

.videos_fondos{
	position:fixed;

	min-width:100%;
	min-height:80%;

	top:50%;
	left:50%;

	transform:translateX(-50%) translateY(-50%);

	z-index:-10;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
	<a href=""><img src="./imagenes/chivatera_logo.png" id="chivatera_logo"></a>
	<video src="./videos/01.mp4" loop class="videos_fondos" muted></video>
</div>

Este es el código con el que lo estoy intentando. Por favor, si alguien me pudiera ayudar, lo agradecería mucho.

4
  • ya has intentado utilizar funciones asíncronas de Jquery? el 4 ago. 2019 a las 21:10
  • En realidad, no. ¿Cómo es eso?
    – Saco04
    el 4 ago. 2019 a las 21:12
  • Bueno, no se si sea específicamente lo que buscas pero una función asíncrona permite ejecutar una función y luego otro sin necesidad de activar un botón o un clic en algo, lo que permitiría, hacer lo que quieres, es decir en el Jquery y le digo que primero quiero la función animación del logo, y después quiero que se ejecute la función de mover a la esquina, y luego la función reproducir vídeo. el 4 ago. 2019 a las 21:19
  • Eso es lo que intento hacer, pero el primer problema, es que la animación no se realiza. Y si no se realiza, tampoco me modifica el video.
    – Saco04
    el 4 ago. 2019 a las 21:20

1 respuesta 1

0

Espero esto te ayude:

function Logo() {
          return new Promise(resolve => {
            setTimeout(() => {
              resolve('Resuelta');
            }, 2000);
          });
        }

        async function Animacion() {
          console.log('Lamar a la otra función');
    //Espera Que primero se resulva la función logo
          var result = await Logo();
          console.log(result);
        }

        asyncCall();

Esto debería ayudar a hacer lo que quieres, si no funciona tú animación quizá sea un error en esta, solo faltaría que agregaras la función Vídeo, haciendo lo que tu quieres.

Saludos

6

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.