61. Video en HTML

El elemento HTML <video> es usado para mostrar un video en una página web.

Ejm

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Como trabaja

El atributo controls agrega controles de video, como reproducción, pausa y volumen. Es una buena idea incluir siempre los atributos width y height. Si no se configuran la altura y el ancho, la página puede parpadear mientras se carga el video.

El elemento <source> permite especificar archivos de video alternativos que el navegador puede elegir. El navegador utilizará el primer formato reconocido.

El texto entre las etiquetas <video> y </video> solo se mostrará en navegadores que no admitan el elemento <video>.

Autoplay

Para iniciar el video automáticamente se utiliza el atributo autoplay

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Agrega muted después de autoplay para permitir que el video comience a reproducirse automáticamente (pero silenciado):

<video width="320" height="240" autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Métodos, propiedades y eventos

El DOM de HTML define métodos, propiedades y eventos para el elemento <video>. Esto permite cargar, reproducir y pausar videos, así como configurar la duración y el volumen. También hay eventos DOM que pueden notificar cuando un video comienza a reproducirse, se detiene, etc.

Scroll al inicio