Skip to main content
se añadieron 2171 caracteres en el cuerpo
Origen Enlace
Sergio Cv
  • 1.2k
  • 2
  • 21
  • 29

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.

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.

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.

Origen Enlace
Sergio Cv
  • 1.2k
  • 2
  • 21
  • 29

ventana emergente con un video en navegador

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.