VideoJS: reproductor de video HTML5

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

VideoJS es un excente reproductor de video basado en JavaScript que utiliza la funcionalidad de video HTML5. La principal ventaja de utilizar VideoJS es la correcta visualización de los videos en diferentes navegadores y plataformas como Telefonos moviles o tablet al no requerir la utilización de Adobe Flash para ver correctamente el contenido de los videos. Además si el navegador de la persona que visita nuestra página no soporta HTML5, automáticamente mostrará un reproductor en Flash alternativo.

videojs

Estas son algunas de sus características:

  • Software gratuito y Open Source
  • Ligero. No utiliza imágenes
  • Skins 100% personalizables mediante CSS (se incluyen los aspectos: vimeo, YouTube y Hulu)
  • Independiente de frameworks
  • Fácil de usar, de entender y extender
  • Aspecto coherente entre los distintos navegadores
  • Pantalla completa
  • Control de volumen
  • Fallback a Flash

Para utilizar VideoJS en nuestra página, lo primero será descargar la última versión de VideoJS, descomprimirla y subirla a nuestro servidor. El siguiente paso será incluir los archivos JavaScript y CSS.

<head>
  ...
    <script src="video.js" type="text/javascript" charset="utf-8">
    </script>
    <link rel="stylesheet" href="video-js.css" type="text/css"
    media="screen" title="Video JS" charset="utf-8">
  ...
  </head>

Para tener las funcionalidades de VideoJS añadimos una función JavaScript que se ejecutará cuando cargue la página:

<script type="text/javascript" charset="utf-8">
VideoJS.setupAllWhenReady();
</script>

Para finalizar, en el tag body construimos el player dentro de un div con clase “video-js-box” para reconocer la sección. Dentro del div creado añadimos <video> con sus respectivos atributos y opciones de formato de video.

  <!-- Begin VideoJS -->
  <div>
    <!-- Using the Video for Everybody Embed Code
http://camendesign.com/code/video_for_everybody -->
    <video width="640" height="264" controls preload
poster="http://video-js.zencoder.com/oceans-clip.png">
      <source src="http://video-js.zencoder.com/oceans-clip.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
      <source src="http://video-js.zencoder.com/oceans-clip.webm"
type='video/webm; codecs="vp8, vorbis"' />
      <source src="http://video-js.zencoder.com/oceans-clip.ogv"
type='video/ogg; codecs="theora, vorbis"' />
      <!-- Flash Fallback. Use any flash video player here.
Make sure to keep the vjs-flash-fallback class. -->
      <object id="flash_fallback_1"code-value">vjs-flash-fallback"
width="640" height="264" type="application/x-shockwave-flash"
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="movie"
value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars"
value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png",
{"url": "http://video-js.zencoder.com/oceans-clip.mp4",
"autoPlay":false,"autoBuffering":true}]}' />
        <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="http://video-js.zencoder.com/oceans-clip.png"
width="640" height="264"
alt="Poster Image"
          title="No video playback capabilities." />
      </object>
    </video>
    <!-- Download links provided for devices that can't play
video in the browser. -->
    <p><strong>Download Video:</strong>
      <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
      <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
      <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
      <!-- Support VideoJS by keeping this link. -->
      <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
    </p>
  </div>
  <!-- End VideoJS -->

Se puede ver una demo online de la funcionalidad del reproductor y sus Skins 100% CSS.

También dispone de varios plugins para hacerlo aún más compatible con: WordPress, jQuery, Drupal, Umbraco y Joomla.

2 comentarios

  1. Antonio March dijo:
    17 diciembre, 2012
    Responder

    Hola

    En ie8 no consigo que se vea la pelicula, en Chrome y Firefox, sí

    Hay algo que debo hacer antes de cargar la demo? O es el ie8 que necesita alguna cosa adicional?

    gracias

  2. jesus dijo:
    8 marzo, 2013
    Responder

    Como lo utilizo para reproducir videos alojados en Youtube?
    Que código se debe colocar? o no es compatible con Youtube?
    Gracias por su respuesta.

Deja un comentario

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

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.