jQuery Subtitles plugin

Inspirado por la página de conmemoración del 5to aniversario de Firefox y el video que muestran con subtítulos externos que aprovecha las bondades de HTML 5 y la etiqueta <video>, creé el plugin Subtitles para jQuery a partir de este snipt de j^.

Básicamente carga y sincroniza subtítulos desde un archivo externo con un video embebido con la etiqueta <video> de HTML 5.

El modo de utilización es bastante simple:

  1. Cargamos jQuery y el plugin:
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="jquery.subtitle.js"></script>
  2. Insertamos la etiqueta video con los atributos que estimemos pertinentes y el elemento donde se visualizarán los subtítulos que puede ser un div, p, spam o cualquier otr que deseemos:
    <video id="video_example" width="505" height="284" src="http://videos.mozilla.org/fyfx/Firefox_Final_VO.ogv" controls="" tabindex="0"></video>
    <p class="subtitulos"></p>
  3. Para finalizar ejecutamos el plugin. Se debe especificar como parámetros el camino hasta el fichero con los subtítulos y el id del video con el que se van a sincronizar:
    <script type="text/javascript">
    	$(document).ready(function(){
    		$(".subtitulos").loadSubtitle("mozilla.srt", "video_example");
    	});
    </script>

Debo agregar que por el momento solo soporta subtítulos en formato .srt.

Pueden ver este ejemplo funcionando y descargar el plugin desde el repositorio de jQuery.

También te puede interesar:

960.gs grid overlay: plugin de jQuery para verificar las retículas Si basas tus diseños web en columnas utilizando el...
jQuery hint Plugin: EZPZ hint EZPZ hint es un plugin de jQuery para mostrar en...
Modificar altura de un textarea de forma automática Vía Twitter y gracias a este micropost de @nourayehia conozco...
Obtener el Trackback URL de un blog utilizando PHP y jQuery Hace unos días vengo testeando Cubanéalo, un proyecto de Cuba...
Sexy Curls jQuery: plugin para efecto de pasar página Gracias a Delicious encontré esta chuchería hoy: un plugin...

Related posts brought to you by Yet Another Related Posts Plugin.