Cómo poner video a modo de intro en web

Juaninabas · #1 (**permalink**) 17/02/2016, 02:43

Buenas, estoy haciendo una web y me gustaría poner un vídeo a modo de intro, es decir, que en cuanto te metas en la web salga el vídeo, y en cuanto este se acabe se quite solo... Creo que requiere de un código HTML5 específico, podríais ayudarme??

muchas gracias de antemano!

carlillos · #2 (**permalink**) 17/02/2016, 11:09

Podría ser con bootstrap y jquery:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<title>Video</title>
</head>
<body>
 
<div class="modal fade" id="ventana">
    <div class="modal-dialog">
        <video id="video" controls autoplay>
            <source src="http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4" type="video/mp4">
        </video>     
    </div>
</div>
 
<script type="text/javascript">
$(window).load(function() {
    $('#ventana').modal('show');
});
$("#video").bind("ended", function() {
    $('#ventana').modal('toggle');
});
</script>
 
</body>
</html>

En este caso jquery se encarga de abrir una ventana modal de bootstrap con el video con atributo "autoplay", así como también de vincular el evento del final del video para cerrar la ventana modal.
Saludos.