Cómo poner un VÍDEO en HTML que se reproduzca solo

Logo de Cuarzo.dev
Cuarzo.dev

Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programación. Ofreciéndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. También tenemos memes 😏

Suscríbete Gratis

Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.

Únete al discord

Reproducir vídeo en HTML

Antes de HTML5 había que instalar plugins como Flash para ver los vídeos.

Ahora con la etiqueta <video> podemos incrustar vídeos en una página web.

See the Pen HTML | 4.2 - Video - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

¿Cómo funciona?

El atributo controls agrega los controles de video, como reproducción, pausa y volumen.

Es recomendable incluir atributos de ancho (width) y alto (height). Si no se configuran alto y ancho, la página puede parpadear mientras se carga el video.

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

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

Autoplay

Con el atributo autoplay puedes hacer que el vídeo comience automáticamente. En dispositivos como iPad o iPhones no funciona

Soporte de los navegadores

En HTML5 hay 3 formatos soportados: MP4, WebM, Ogg.

Media types

Métodos, propiedades y evento

HTML5 define métodos DOM, 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 notificarle cuando un vídeo comienza a reproducirse, está en pausa, etc.

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares
Koding Beats