3

Estoy desarrollando una pagina web y hay una petición que tengo por parte del cliente y no se muy bien como llevarla a cabo.

Mi idea es que nada mas entrar en el index, aparezca un video en una ventana emergente(publicidad) y que cuando este video termine, la ventana desaparezca.

Hay alguna manera de hacerlo? y de controlar cuando acaba el video?

La idea sería a traves de un script de JavaScript, pero no lo tengo del todo claro.

Gracias.

EDITO:

Con la ayuda de Jordi Flores ya casi esta:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
#myVideo {
  display: none;
}
</style>

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="http://fancyapps.com/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>



<script type="text/javascript">
$(document).ready(function() 
        {
$("#openVideo").fancybox({
 'closeBtn':false,
 'openEffect': 'fade',
 helpers   : { 
overlay : {closeClick: false} // prevents closing when clicking OUTSIDE fancybox 
}
});

//simulamos click y abrimos fancybox
$("#openVideo").eq(0).trigger("click");

//forzamos play
document.getElementById('myvideo').play();      
});

document.getElementById('myvideo').addEventListener('ended',myHandler, false);
function myHandler(e) {
console.log("el video se ha acabado!!")
$.fancybox.close();
}

</script>


</head>
<body>




<!--Boton para abrir video, solo para test  -->
<a href="#myVideo" id="openVideo">open video</a>

<div id="myVideo" >
   <div id="videoWrapper">
      <video id="myvideo" autoplay>
           <source src="008.mp4" type="video/mp4">
            Your browser does not support html5 videos
      </video>
   </div>
</div>





</body>
</html>

Aunque ahora el video no se cierra y si pongo uno ubicado en mi pc no lo reproduce.

3 respuestas 3

3

Aquí puedes ver un ejemplo completo:

usa fancybox para abrir y encapsular el video hasta que este finalice, una vez haya finalizado, con el evento en js que tienes en el ejemplo, cierras el fancybox.

$(document).ready(function() 
                  {
		 $("#openVideo").fancybox({
           'closeBtn':false,
           'openEffect': 'fade',
           helpers   : { 
   overlay : {closeClick: false} // prevents closing when clicking OUTSIDE fancybox 
  }
         });
        
        //simulamos click y abrimos fancybox
        $("#openVideo").eq(0).trigger("click");
  
        //forzamos play
        document.getElementById('myvideo').play();      
	});

document.getElementById('myvideo').addEventListener('ended',myHandler, false);
    function myHandler(e) {
     console.log("el video se ha acabado!!")
     $.fancybox.close();
    }
#myVideo {
  display: none;
}
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="http://fancyapps.com/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


<!--Boton para abrir video, solo para test  -->
<a href="#myVideo" id="openVideo">open video</a>

<div id="myVideo" >
   <div id="videoWrapper">
      <video id="myvideo" autoplay>
           <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
           <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
            Your browser does not support html5 videos
      </video>
   </div>
</div>

13
  • Ver el snippet en pantalla completa para poder ver los controles del video Commented el 27 oct. 2016 a las 14:14
  • Jordi esto esta genial, pero una pregunta, hay alguna manera que el video se abra automaticamente y se ejecute? sin darle al play ni al open video?
    – Sergio Cv
    Commented el 27 oct. 2016 a las 14:16
  • Si @SergioCv en principio poniendo el property autoplay en el tag de video, creo que en mi ejemplo no funciona porque lo está cargando de streaming, pero dejame mirarlo. Sé que funciona porque lo tengo funcionando el autoplay en otra aplicación. Commented el 27 oct. 2016 a las 14:27
  • Acabo de actualizar el codigo, ahora se abre automaticamente el fancybox y se reproduce el video. @SergioCv Commented el 27 oct. 2016 a las 14:35
  • funciona a las mil maravillas disculpa, el unico problema que no se cierra al terminar la animacion
    – Sergio Cv
    Commented el 27 oct. 2016 a las 14:41
2

He encontrado varias respuestas que puede que te sirvan, todo con y lo he intentado desarrollar lo mejor que he podido, pero no he terminado de dejarlo "bonito". Espero que alguien lo edite, o cuando llegue a casa lo haré desde el ordenador mejor.

Para crear el PopUp
Primer Ejemplo ←StackOverflow Inglés
Segundo Ejemplo

Para insertar un video con Html5
w3Schools con ejemplos

.box {
  width: 20%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: visible;
  opacity: 1;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  z-index: 999;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
}
.popup {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  /* Animación que durará 2 segundos*/
  -webkit-animation: autopopup 2s;
  -moz-animation: autopopup 2s;
  animation: autopopup 2s;
}
.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: orange;
}
.popup .content {
  position: relative;
  margin: 7% auto;
  padding: 30px 50px;
  background-color: #fafafa;
  color: #333;
  border-radius: 3px;
  width: 50%;
}
a.popup-cerrar {
  position: absolute;
  top: 3px;
  right: 3px;
  background-color: #333;
  padding: 7px 10px;
  font-size: 20px;
  text-decoration: none;
  line-height: 1;
  color: #fff;
}
to {
  opacity: 1;
}
}
@keyframes autopopup {
  from {
    opacity: 0;
    margin-top: -200px;
  }
  to {
    opacity: 1;
  }
}
<html>

<body>
  <div class="popup1" class="overlay">
    <div class="popup">
      <video width="320" height="240" controls>
        <a class="close" href="#popup1">X</a>
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
          Your browser does not support the video tag.
      </video>
    </div>
  </div>


</body>

</html>

1
  • @rnd desconozco si has realizado el downvote, pero si era por el hecho de sólo haber links ya no es así ;) Commented el 28 oct. 2016 a las 10:10
1

En el evento OnLoad del index has de abrir una pagina (window.open();) en la que esté el video y depués reproducirlo

var video = document.getElementById("video");   
video.load();
video.play(); 

Y para que se cierre tienes que detectar cuando acaba de reproducir, con un evento:

video.addEventListener('ended',myHandler,false);
    function myHandler(e) {
        window.close();
    }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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