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

por

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>.

[the_ad id=»4531″]

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:

<!-- JS and CSS for Video Player -->
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<style type="text/css">
	.vjs-default-skin .vjs-big-play-button { font-size: 2em; }
</style>

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.

<video id="MY_VIDEO_1" class="video-js vjs-default-skin" style="margin-bottom: 15px;" controls preload="none" width="500" height="260" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
	<source src="MY_VIDEO.mp4" type='video/mp4'>
	<source src="MY_VIDEO.webm" type='video/webm'>
	<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>

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 😉

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

  2. Hola, gracias por el tuto, ese reproductor lo puedo aplicar a la plantilla de mi web cinelatinos? Sorry por el spam solo es para que digas si se puede.

    • 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.

  3. 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

  4. 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.

  5. Quiero inscrutar un video que tengo subido en openload pero no me reproduce por que sera :/
    <enlace eliminado>.mp4
    me puedes ayudar con el codigo, lo quiero para un blog. Gracias y Saludos.

    • Hola, éste articulo es para videos hosteados en un servidor o espacio web propio y no para videos guardados en youtube, videoload u otras páginas similares. Ya que videoload tiene demasiada publicidad, eliminé el enlace. Saludos, Jens W.

  6. Hola amigo, gracias por el post.
    Quiero agregar una url de canales de televisión terminados en .m3u8, pero no me los reproduce.
    Te agradecería mucho si me puedes orientar un poco con lo que quiero realizar.
    PD: yo instalé el plugin video.js en WordPress.

Los comentarios están cerrados.