Iniciar automáticamente un vídeo en HTML5

16/Ene/2012 HTML5 , 5 Comentarios

Ya hemos aprendido a cómo cargar un vídeo en HTML5 dentro de nuestra página y a cómo cargar el vídeo en HTML5 desde diferentes formatos. En el código de hoy veremos cómo iniciar automáticamente un vídeo en HTML5.

Y es que el hecho de insertar las etiquetas VIDEO dentro de nuestra página web no implica que el vídeo aranque automáticamente. Si no que deberemos de utilizar los controles (los cuales cargamos mediante el atributo HTML5 controls) para iniciarlo.

Pues bien, para iniciar automáticamente un vídeo en HTML5 tenemos dos formas. La primera consiste en utilizar el atributo autoplay del elemento VIDEO. Simplemente añadiendo este parámetro en nuestro código HTML5 conseguiremos que se inicie automáticamente. El código será el siguiente:

  1. <video autoplay="autoplay" controls>
  2. <source src="videos/tecla.ogv" type="video/ogg"></source>
  3. Tu navegador no soporta el elemento <code>video</code>
  4. </video>

La segunda opción será utilizar el interface Javascript que nos ofrecen los elementos multimedia en HTML5. Este interface es conocido como HTMLMediaElement. En concreto utilizaremos un método que se llama .play() y que comos u nombre bien nos indicar inicializa la ejecución del vídeo.

Así lo primero que haremos será obtener la referencia al elemento vídeo de nuestra página (que ya no tiene el autoplay).

  1. var v = document.getElementsByTagName("video")[0];

Esto lo podemos hacer vía id con .getElementById() o por etiqueta con .getElementsByTagName(). En ambos casos tendremos la refenrencia sobre el vídeo. Ya solo nos quedará el ejecutar el método .play().

  1. v.play();

Si queremos que este código simule que se inicie automáticamente el vídeo, deberemos de ponerlo en el onLoad de la página o al final estructura de la misma.

Así, podemos tener en nuestra página dos vídeos HTML5 iniciados automáticamente, uno vía el elemento HTML5 y otro con el interface HTMLMediaElement y Javascript.

  1. <video controls>
  2. <source src="http://lineadecodigo.com/wp-content/uploads/2012/01/tecla.ogv" type="video/ogg"></source>
  3. Tu navegador no soporta el elemento <code>video</code>
  4. </video>
  5.  
  6. <video autoplay="autoplay"controls>
  7. <source src="http://lineadecodigo.com/wp-content/uploads/2012/01/tecla.ogv" type="video/ogg"></source>
  8. Tu navegador no soporta el elemento <code>video</code>
  9. </video>
  10.  
  11. <script type="text/javascript">
  12. var v = document.getElementsByTagName("video")[0];
  13. v.play();
  14. </script>

Vídeos sobre HTML5


5 comentarios en “Iniciar automáticamente un vídeo en HTML5”

Víctor Cuervo

CMNetwork

Como poner autoplay por parámetro. Por ejemplo:

https://example.com/video?autoplay=on/

Gracias por tu post, es muy interesante y muy especificado…

Víctor Cuervo

antonio jose pacheco marco

Hola soy nuevo en desarrollo web,de hecho acabo de finalizar un curso de realizacion de paginas web con html,java,css etc pero el java no fue mi fuerte,jajaja.
Me gustaría saber cómo hacer lo del video de la siguiente páginma para ponerle uno parecido a la web que estoy haciendo para un cliente.
Esta es la web de referencia:

http://wwws.warnerbros.co.jp/waranotate/index.html

quiero poner un video de información para cuando entren y al hacer clip en skip,les muestre la web real.

Víctor Cuervo

Víctor Cuervo

Buenas,

Pues tienes varias alternativas. La primera es que te lo hagas a mano. En este caso puedes crear una capa con un vídeo que ocupe toda la pantalla y que se oculte al dar a skip. Si no tienes la utilidad que usa esa página que es el Fancybox http://fancybox.net/ el cual lo implementa con jQuery y se puede utilizar de forma sencilla.

Saludos.

Víctor Cuervo

Víctor Cuervo

@codecriticon,

Gracias por las felicitaciones. La verdad es que sí, las capacidades de HTML5 son inmensas y permiten hacer muchas más cosas que en HTML4. Demasiados años sin tener novedades en la web hace que ahora tengamos muchas cosas por aprender y probar.

Desde Linea de Código esperamos poder publicar muchas cosas sobre HTML5 – http://lineadecodigo.com/categoria/html5/

Víctor Cuervo

codecriticon

Felicidades por el artículo, muy interesante.

Creo que HTML5 tiene inmensas posibilidades tanto para el publico en general como para los desarrolladores, que nos facilita muchisimo ciertos desarrollos. Os imaginais este mismo problema con HTML4?

Responder a codecriticon Cancelar respuesta

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*