Foros del Web » Creando para Internet » HTML »

Cómo poner video a modo de intro en web

Estas en el tema de Cómo poner video a modo de intro en web en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/02/2016, 02:43
 
Fecha de Ingreso: febrero-2016
Mensajes: 1
Antigüedad: 6 años, 4 meses
Puntos: 0
Exclamación Cómo poner video a modo de intro en web

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!

Última edición por Juaninabas; 17/02/2016 a las 04:18
  #2 (permalink)  
Antiguo 17/02/2016, 11:09
Avatar de carlillos  
Fecha de Ingreso: febrero-2007
Ubicación: México
Mensajes: 245
Antigüedad: 15 años, 5 meses
Puntos: 21
Respuesta: Cómo poner video a modo de intro en web

Podría ser con bootstrap y jquery:
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  5. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  6. <title>Video</title>
  7. </head>
  8.  
  9. <div class="modal fade" id="ventana">
  10.     <div class="modal-dialog">
  11.         <video id="video" controls autoplay>
  12.             <source src="http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4" type="video/mp4">
  13.         </video>    
  14.     </div>
  15. </div>
  16.  
  17. <script type="text/javascript">
  18. $(window).load(function() {
  19.     $('#ventana').modal('show');
  20. });
  21. $("#video").bind("ended", function() {
  22.     $('#ventana').modal('toggle');
  23. });
  24.  
  25. </body>
  26. </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.

Etiquetas: html5, intro, modo, video
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:00.