Foros del Web - Ver Mensaje Individual

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.