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.