19Jul

Cómo añadir controles personalizados a un elemento VIDEO de HTML5

El elemento VIDEO de HTML5 nos permite incrustar con solo una etiqueta un vídeo en nuestras webs sin necesidad de Flash.

El siguiente ejemplo de código muestra como añadir un elemento vídeo con los controles por defecto del componente:

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

A continuación vemos el código funcionando:

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

Si no queremos los controles por defecto, queremos dar un estilo propio al elemento, o queremos desactivar la posibilidad de que el usuario realice ciertas acciones sobre el elemento podemos crear componentes personalizados en HTML y luego simplemente enlazar las funcionalidades con Javascript.

Creando botones Play y Pause

Vamos a quitar los controles por defecto y añadir dos botones HTML para controlar el elemento vídeo. Únicamente dejaremos realizar dos acciones sobre el vídeo: Parar y Seguir reproduciendo.

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="480">
    <source src="/videos/archivo_video.mp4" type="video/mp4">
</video>

Hemos definido dos funciones Javascript en el objeto window: reproducir y pausar que actúan directamente sobre la API del elemento vídeo y llamamos a las dos funciones cuando se hace click encima de los botones de la vista.

Nos dará como resultado el siguiente elemento de vídeo sin controles y con los botones personalizados para controlar la reproducción del vídeo.

Atributos Elemento Tag: https://www.w3schools.com/tags/tag_video.asp

Leave a comment