Cómo incrustar un video con VideoJS en HTML – Reproductor de Video gratuito y Open Source

Hoy te quiero presentar un Reproductor de Video de código abierto llamado VideoJS.

En un proyecto de página web que tuve hace un par de días necesitaba una forma de incrustar un video sin tener que subirlo a YouTube, Vimeo o lo que sea. El video estaba guardado en el mismo servidor que el sitio web. Después de investigar y comparar varias opciones elegí VideoJS porque:

  1. Es de código abierto
  2. Es gratuito
  3. Es fácil de integrar y configurar
  4. Tiene muchas funciones
  5. Tiene un diseño atractivo!
  6. Se puede personalizar el diseño completamente con CSS

El reproductor tiene muchas funciones y configuraciones pero sólo mostraré lo básico. Si quieres conocer todas las funcionalidades del Script, puedes visitar el sitio web oficial en <a href=”http://videojs.com/” target=”_blank”>http://videojs.com/</a>.

Primeramente necesitas integrar los estilos básicos y el código JavaScript fuente en la cabecera de tu sitio web. Las líneas 2 y 3 lo hacen. Entre las líneas 4 y 6 puedes puedes definir estilos que sobreescriban los estilos predeterminados del reproductor. El estilo que incluí no es obligatorio pero lo recomiendo: por defecto, el botón “Play” es exageradamente grande. Con éste código extra es un poco más atractivo.

Inserta éste código en la sección <head> de tu sitio web:

Ahora puedes incluir tantos repdoductores de Video come quieras. Antes de que procedas, aquí algunas explicaciones sobre la configuración:

  • width=”500″: Define el ancho del reproductor.
  • height=”260″: Define la altura del reproductor.
  • poster=”MY_VIDEO_POSTER.jpg”: Define una imágen de presentación. Reemplaza MY_VIDEO_POSTER.jpg con la URL de una imágen propia. No es necesario y puedes eliminar éste parámetro por completo si no lo necesitas.
  • <source src=”MY_VIDEO.mp4″ type=’video/mp4′>: Lo más importante de todo: definir la fuente del Video. Reemplaza MY_VIDEO.mp4 con la URL de tu video. Si tu video tiene una extensión diferente, cámbiala también en el parámetro “type=’video/mp4′”. Puedes definir varias fuentes del Video para extensiones diferentes. Así aseguras que se pueda ver el video en todos los navegadores. Si tienes sólo un video de una extensión, elimina la línea 3 del código de abajo.

Inserta éste código en donde quieras mostrar el reproductor de video y ajustalo de acuerdo a tus necesidades.

Si tienes alguna duda o sugerencia, aprecio cada comentario 😉

[Total:1    Promedio:5/5]

Jens Wagner

Freelancer y aficionado de las tecnologías de programación, desarrollo web y Linux. Instala y reinstala cada dos semanas su sistema operativo para probar cosas nuevas y encontrar el sistema "perfecto" - algo que nunca pasará pero.... Es el fundador de éste sitio y lo mantiene actualizado desde 2012.

3 comentarios en “Cómo incrustar un video con VideoJS en HTML – Reproductor de Video gratuito y Open Source

    1. Hola Imirher, claro que si puedes usar el reproductor de VideoJS. El reproductor no depende de tu plantilla web, sólo tienes que hacer las referencias a VideoJS y ajustar la forma de mostrar videos.

      0

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *