Agregar reproductor de video en HTML

Actualmente la mayoría de los exploradores soportan la reproducción de videos, HTML proporciona las etiquetas para agregar un reproductor de video.

Agregar el reproductor de video

Crea o abre un archivo html y agrega su estructura básica, coloca el siguiente código en el body.

<video controls>
    <source src="24102018.mp4">
        Tu navegador no soporta video.
</video>

• Las etiquetas video indican que se cargara un archivo multimedia.
• Controls, agrega los controles por defecto para reproducir, volumen, expandir, etc.
• La etiqueta source contiene la dirección del video.
• Mensaje si el explorador no soporta video.

Puedes colocar más de una etiqueta source para indicar los diferentes formatos del video, para que el explorador reproduzca el que tenga soporte.

Es necesario colocar el mismo video hasta 3 veces en la misma ruta, pero con diferentes formatos.

Ejecuta el archivo html en el explorador (con o sin levantar un servidor local), podrás ver un resultado similar a esto.

El ejemplo anterior es la manera básica, en la documentación podrás encontrar todas las funciones que puedes agregar.

Formatos de video soportados

Ya que estamos trabajando con el explorador, las etiquetas de video tienen limitantes en los formatos de video. Entre los formatos soportados tenemos.

• MP4
• ogg
• webm

El formato más soportado por lo exploradores es el MP4, considera la primera opción para los videos que quieres cargar.

No es la única forma de agregar videos a un sitio web, existen alternativas que te permiten reproducir videos de gran calidad. Sin embargo, estas opciones regularmente tienen un costo, ya que te proporcionan todo el código para agregarlo a tu proyecto.

Podría interesarte Insertar audio en HTML  

Puntos para considerar

La ubicación del video debe estar en la misma ubicación del proyecto web, ya que al ejecutar el html realiza la búsqueda en su directorio.

Si quiere agregar videos de otro sitio, debes de colocar la url si está alojado en internet. Si quieres agregar los videos de tu equipo, pero sin colocarlos en la ubicación del proyecto, deberás levantar un servidor web y agregarlos ahí para obtener la url local.