Player de Video HTML5: VideoJS

VideoJS es un Player para reproducir Videos en HTML5, esto permite compatibilidad con navegadores móviles y la ventaja de no requerir flash para ver los videos, otra de sus ventajas es que si el navegador no soporta HTML5 automáticamente nos muestra su reproductor en Flash alternativo.

 

 

Mejores características

  • De Licencia Open Source (libre)
  • Realmente ligero (no utiliza imágenes)
  • Skins 100% CSS
  • Modo Full Screen y Full Window
  • Control de volumen
  • Compatible en navegadores móviles
  • Incluye skins de Youtube, Vimeo y más.
  • Plugins para jQuery y WordPress

 

Como funciona?

Lo primero es descargar la ultima versión de VideoJS, luego descomprimirlo y colocarlo en una carpeta de nuestro servidor local.

Descargar VideoJS

 

Incluir Librerías Javascript y CSS

El siguiente paso para incluir VideoJS en nuestra pagina web sera el de 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>

Ahora debemos ingresar una función JavaScript que se ejecutara cuando toda la pagina cargue, esto para tener las funcionalidades de VideoJS.

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

 

Estructura del player

Finalmente dentro del body construimos el player dentro de un div con clase “video-js-box” para reconocer la sección.

<div class="video-js-box">
...
</div>

Dentro de este colocamos el tag <video> con sus respectivos atributos y opciones de formato de video.

<video id="example_video_1" class="video-js" width="640" height="264" preload poster="http://video-js.zencoder.com/oceans-clip.png" controls>
  <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"'>
  
  <!-- Utilizar flash cuando el navegador no soporte HTML5 -->
  
  <object class="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}]}' />
	
	<!-- Utilizar una imagen al no soportar Flash -->
	<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
	  title="No video playback capabilities." />
  </object>
  
</video>

<!-- Opción para descargar el video en caso no se soporte ninguna tecnología. -->

<p class="vjs-no-video"><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>

Con esto hemos obtenido un reproductor que soporta diferentes formatos de video, puede cambiar a Flash en caso el navegador no soporte HTML5 y la opción de descargar los videos en diferentes formatos si no se lograra reproducir de ninguna forma.

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

Ver demos

También te puede interesar

3 Comments

  1. gnumax
    feb 12, 2011 @ 16:24:03

    Excelente aportación que me ha sido muy útil. Ahora ando investigando la forma de poner por HTML5 una marca de agua o “mosca” personalizada.

    Gracias

    Reply

  2. chelo
    nov 24, 2011 @ 18:43:13

    capaz que una div superspuesta dentro de la conformacion del video

    Reply

  3. Player de Video HTML5: VideoJS | Chucherías
    dic 16, 2011 @ 09:56:58

    Reply

Leave a Reply