Iniciar automáticamente un vídeo en HTML5

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 arranque automáticamente. Si no que deberemos de utilizar los controles (los cuales cargamos mediante el atributo HTML5 controls) para iniciarlo.

Utilizando el atributo autoplay

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:

<video autoplay="autoplay" controls="controls" width="300" height="150">
  <source src="videos/tecla.ogv" type="video/ogg">
  Tu navegador no soporta el elemento <code>video</code>
</video>

Utilizando Javascript y el método play()

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 como su nombre bien nos indica 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).

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 referencia sobre el vídeo. Ya solo nos quedará el ejecutar el método .play().

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.

Código completo

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.

<video controls="controls" width="300" height="150">
  <source src="http://lineadecodigo.com/wp-content/uploads/2012/01/tecla.ogv" type="video/ogg">
  Tu navegador no soporta el elemento <code>video</code>
</video>

<video autoplay="autoplay" controls="controls" width="300" height="150">
  <source src="http://lineadecodigo.com/wp-content/uploads/2012/01/tecla.ogv" type="video/ogg">
  Tu navegador no soporta el elemento <code>video</code>
</video>

<script type="text/javascript">
  var v = document.getElementsByTagName("video")[0];
  v.play();
</script>