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.

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.

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.

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:

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!

 

Calificación de Lectores
[Total: 3 Media: 3.3]

1 thought on “Control del elemento video de html5 con Javascript

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Usamos cookies para personalizar su experiencia. Si sigue navegando estará aceptando su uso. Más Información | Cerrar