Colocar un video en HTML5 es simple, no más complejo para un navegador determinado que colocar una imagen. En este artículo aprovecharemos al máximo el soporte integrado del navegador para construir el reproductor de video más simple posible.

Estableceremos el marco básico de la aplicación y luego usaremos

Requisitos previos

Use Chrome, Safari o Internet Explorer 9+. Por el momento, tendrá que evitar Firefox y Opera debido a los problemas de formato de archivos de video entre navegadores. Aunque el soporte para el elemento de video es constante en todos los navegadores modernos, el formato MP4 funciona en Firefox y Opera. Usted puede verificar la compatibilidad aquí.

Antes de comenzar, necesitará encontrar un .mp4 que pueda usar, si no tiene uno, encontrará muchos archivos mp4 gratuitos en línea.

Construyendo el marco básico

El siguiente código es el marco alrededor del cual construyes el jugador. Crea un diseño simple y tiene un marcador de posición para el video en sí.

Necesita crear un nuevo archivo HTML en su directorio de trabajo y asígnele el nombre index.html, luego agregue este código:

HTML5 Video Player

Ahora, con la base establecida, vayamos a la parte divertida del jugador agregando un video a la página.

Usar el elemento de video para agregar videos a páginas web

El objetivo en el diseño de HTML5

Así es como se ve un video HTML5 en Chrome:

La siguiente lista muestra todo el código requerido para mostrar el video. Como puede ver, no es complicado.

Inserta este código en lugar del " "Comente en el código anterior, asegúrese de reemplazar [SU VIDEO] con la ruta a su .mp4, y actualice la página.