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.

La última versión de VidoeJS puedes encontrar en la página oficial http://videojs.com/. Ahí también encontrarás un editor para personalizar el diseño del reproductor: https://codepen.io/heff/pen/EarCt.

Si tienes alguna duda o sugerencia, aprecio cada comentario 😉

[Total:2    Promedio:3.5/5]

Jens Wagner

Fundador de Fosforito.Net y aficionado de las tecnologías de programación, del desarrollo web y Linux. Hace una formación al informático especializándose en el desarollo de software en Alemania y mantiene Fosforito.Net actualizado desde 2012.

7 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

  1. Hola, lo primero gracias por sacarme del apuro, es mi primera acción de este tipo y me ha salido a la primera, la única duda que tengo es sobre cómo puedo quitar la opción de “Guardar vídeo” del menú contextual que sale al darle al botón derecho del ratón sobre el vídeo, para que no se pueda descargar.

    Muchas gracias, muy útil el codigo.

    Juan

    0

  2. Muchas gracias por la inf. realmente practica, nada de complicaciones ni pasos confusos.
    Pero acaso habra una forma de cambiar el skin?, de igual modo esta muy bueno.
    Estare pasando mas seguido.

    0

Deja un comentario

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