Control del elemento video de html5 con Javascript

Gracias al elemento video de html5 podemos insertar con tan solo una etiqueta un vídeo en nuestra página sin necesidad de recurrir a Flash.

Como funciona el elemento video de html5

El elemento video es similar al elemento audio. Dispone de los atributos autoplay, loop y preload.

<!-- Ejemplo Preload -->

<video width="600" height="400" controls preload>
    <source src="video.mp4" type="video/mp4">
</video>

<!-- Ejemplo Autoplay -->

<video width="600" height="400" autoplay>
 <source src="video.mp4" type="video/mp4">
</video>

<!-- Ejemplo Loop -->
	
<video width="600" height="400" loop>
    <source src="video.mp4" type="video/mp4">
</video>

Es recomendable siempre en el atributo type especificar el formato del archivo que queremos reproducir.

Asimismo podemos utilizar los controles que nos ofrece el navegador de forma nativa utilizando el atributo controls o bien podemos crear nuestros propios controles en JavaScript.

Agregando controles a un video

A continuación vamos a crear un pequeño ejemplo del elemento video de html5 con los controles por defecto del componente.

<video width="320" height="240" controls>
    <source src="/videos/archivo_video.mp4" type="video/mp4">
</video>

El atributo controls dentro de la etiqueta video es la que proporciona los controles por defecto en el componente HTML.

Notificaciones Push en el Navegador con Html5 y JavaScript

Además tenemos la posibilidad de anular los controles por defecto o crear componentes personalizados en HTML5.  Luego simplemente los enlazamos con las funcionalidades con Javascript.

Portada del vídeo

Otra de las posibilidades que nos proporciona el elemento video de html5 es la de insertar una imagen  representativa usando el atributo poster.

<video width="600" height="400" controls poster="/imagen-preview.png">
    <source src="video.mp4" type="video/mp4">
</video>

Creando botones Play y Pause

A continuación vamos a quitar los controles por defecto y añadir dos botones HTML para controlar el elemento vídeo.

El HTML del vídeo y los dos botones sería el siguiente código:

<script type="text/javascript">
window.reproducir = function() {
    document.getElementById("video").play();
};

window.pausar = function() {
    document.getElementById("video").pause();
};

</script>

<button onclick="reproducir()">Reproducir</button>
<button onclick="pausar()">Parar</button>
<video id="video" width="640" height="780">
    <source src="/videos/archivo_video.mp4" type="video/mp4">
</video>

Gracias al anterior código hemos eliminado los controles por defecto del video y hemos agregado dos botones personalizados que nos permiten reproducir y pausar el vídeo.

¿Os ha resultado de utilidad este tutorial? Espero que así haya sido, y como siempre os doy las gracias por seguirme en las redes sociales, y como no, compartir estos artículos con vuestros amigos. ¡Saludos!