Tutorial HTML: Video (video)

El elemento <video> en HTML5 se utiliza para incrustar un video en una página web. Este elemento contiene una serie de atributos que permiten al usuario controlar la reproducción del video, incluyendo la posibilidad de reproducir, pausar, cambiar el volumen y la velocidad, y desplazarse a lo largo de la línea de tiempo del video.

Código básico

El código básico para incrustar un video en una página web con HTML5 es el siguiente:

<video src="mi_video.mp4" controls>
    Tu navegador no soporta el elemento de video.
</video>

En este ejemplo, src es el atributo que especifica la ubicación del video. El valor puede ser una URL absoluta, una URL relativa, o un camino hacia un archivo de video en el sistema local.

El atributo controls se utiliza para mostrar los controles de reproducción del video, como el botón de play/pausa, el control deslizante de volumen y la línea de tiempo.

El texto dentro del elemento <video> ("Tu navegador no soporta el elemento de video") se muestra solo si el navegador del usuario no es compatible con el elemento <video>.

Atributos del elemento video

Hay varios atributos que puedes utilizar con el elemento <video> para controlar la reproducción del video y la forma en que se muestra en la página web. Algunos de los más comunes incluyen:

• autoplay: Comienza a reproducir el video tan pronto como esté listo.
• controls: Muestra los controles de reproducción.
• loop: Repite el video una vez que se haya terminado.
• muted: Silencia el video al inicio.
• poster: Especifica una imagen que se mostrará antes de que comience la reproducción del video.
• preload: Especifica si y cómo se debe cargar el video cuando la página se carga.

<video src="mi_video.mp4" controls autoplay loop muted poster="mi_imagen.jpg">
    Tu navegador no soporta el elemento de video.
</video>

Soporte de formatos de video

No todos los navegadores soportan todos los formatos de video. Para asegurarte de que tu video se pueda reproducir en todos los navegadores, puedes especificar múltiples fuentes para el video en diferentes formatos. El navegador utilizará la primera fuente que sea capaz de reproducir.

<video controls>
  <source src="mi_video.mp4" type="video/mp4">
  <source src="mi_video.webm" type="video/webm">
  Tu navegador no soporta el elemento de video.
</video>

En este ejemplo, si el navegador puede reproducir videos MP4, utilizará mi_video.mp4. Si no puede reproducir videos MP4, pero puede reproducir videos WebM, utilizará mi_video.webm. Si no puede reproducir ninguno de los dos formatos, mostrará el mensaje "Tu navegador no soporta el elemento de video".

En resumen, el elemento <video> de HTML5 proporciona una forma sencilla y flexible de incrustar videos en una página web. Con una variedad de atributos disponibles, puedes controlar cómo se reproduce y se muestra el video en la página web.