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:
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).
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().
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.
