LibreVideoJS es un reproductor de Vídeo escrito en ECMAScript (JavaScript) compatible con LibreJS.

Jesús Eduardo 351168e0c2 change to author lowercase		7 years ago
css	d20da4f325 First commit	7 years ago
fonts	d20da4f325 First commit	7 years ago
images	ee30b1a54d Compress Images	7 years ago
js	d20da4f325 First commit	7 years ago
src	d20da4f325 First commit	7 years ago
subtitles	d20da4f325 First commit	7 years ago
LICENSE	d20da4f325 First commit	7 years ago
README.md	351168e0c2 change to author lowercase	7 years ago
bower.json	d20da4f325 First commit	7 years ago
demo-custom-material-multicolors.html	d20da4f325 First commit	7 years ago
demo-custom-material.html	d20da4f325 First commit	7 years ago
demo-custom-skin.html	d20da4f325 First commit	7 years ago
demo-default-progreestips.html	d20da4f325 First commit	7 years ago
demo-mix-material.html	d20da4f325 First commit	7 years ago
demo-mix-multicolors.html	d20da4f325 First commit	7 years ago
demo-progreestips-multicolors.html	d20da4f325 First commit	7 years ago
demo-progreestips.html	d20da4f325 First commit	7 years ago
demo.html	d20da4f325 First commit	7 years ago
example-hotkeys.html	d20da4f325 First commit	7 years ago
humans.txt	d20da4f325 First commit	7 years ago

LibreVideoJS

LibreVideoJS es un reproductor de Vídeo escrito en JavaScript compatible con LibreJS, construido con una tipografía personalizada en Material Desing para un mundo Libre.

Repositorio de los archivos bases sin modificación.

Base en VideoJS

Guía de inicio rápido

Para poder utilizar el programa en Internet deberás tener un servidor GLAMP, WAMP o MAMP, o si deseas solo probarlo, puedes descargar LibreVideoJS y ejecutar un demo con tu Navegador Libre Favorito.
Clona el repositorio en cualquier carpeta del servidor o en tu directorio local (p. ej., git clone https://notabug.org/Heckyel/LibreVideoJS.git /var/www/html/LibreVideoJS).
Agrega o combina los directorios css, fonts y js en la raíz del servidor web.
Agrega los enlaces de los archivos CSS y JavaScript en la cabecera del archivo HTML o PHP de la siguiente forma:

<head>:

<link href="https://tudominio.example/css/librevideojs-material/libre-skin-teal.css" rel="stylesheet"/>
<link href="https://tudominio.example/css/selector/video-quality-selector.css" rel="stylesheet">
<script src="https://tudominio.example/js/cliplibrejs.dev.js"></script>

Puedes usar https o http, según sea el caso de tu sitio web.

Entonces, cada vez que desee utilizar LibreVideoJS puede simplemente usar la etiqueta '<video>' como lo haría normalmente. Soporta los formatos más utilizados como WEBM, OGV y MP4 (No romendado el formato MP4 por cuestiones de patentes).

<video id="example" controls preload="none" poster="images/poster.jpg" data-setup="{}">
    <source data-res="1080p" src="video/libre1920x1080.ogv" type="video/ogg">
    <source data-res="720p" src="video/libre1280x720.ogv" type="video/ogg">
    <source data-res="480p" src="video/libre640x480.ogv" type="video/ogg">
    <source data-res="240p" src="video/libre320x240.ogv" type="video/ogg">
    <source data-res="144p" src="video/libre256x144.ogv" type="video/ogg">
    <track kind="captions" src="subtitles/libre_en.vtt" srclang="en" label="English"/>
    <track kind="captions" src="subtitles/libre_es.vtt" srclang="es" label="Español" default/>
    <track kind="subtitles" src="subtitles/libre_en.vtt" srclang="en" label="English"/>
    <p class="no_html5">Lo siento, este navegador no soporta HTML 5. Por favor, cambia o actualiza tu navegador Web</p>
</video>

Debajo, el siguiente script añade los estilos al reproductor de vídeo solo cuando JavaScript está habilitado, y sino está habilitado muestra el reproductor de vídeo por defecto del navegador.

<script>
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
var estilos = document.getElementById("example");
estilos.className += " cliplibre-js-responsive-container librevjs-hd cliplibre-js librevjs-default-skin";
// @license-end
</script>

Si desea que el reproductor pueda cambiar de resoluciones puede ingresar más abajo el siguiente código JavaScript

<script>
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
cliplibrejs('#example',{plugins:{resolutionSelector:{force_types:['video/webm','video/ogg'],default_res:"360p"}},nativeControlsForTouch: false});
// @license-end
</script>

¡Funcionalidad de Responsive Web Desing es automático desde CSS!

Si desea funcionalidad de hotkeys ingrese este código:

<script>
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
cliplibrejs('#example').ready(function(){this.hotkeys({volumeStep: 0.1,seekStep: 5,enableMute: true,enableFullscreen: true,enableNumbers: true});});
// @license-end
</script>

Si desea combinar las dos funciones anteriores, puede usar el código simplificado:

<script>
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
cliplibrejs('#example',{plugins:{resolutionSelector:{force_types:['video/webm','video/ogg'],default_res:"480p"}}, nativeControlsForTouch:false}).ready(function(){this.hotkeys({volumeStep:0.1,seekStep:5,enableMute:true, enableFullscreen:true,enableNumbers:true,});});
// @license-end
</script>

Instalación vía Bower

bower install librevideojs

ProgreesTips

Es el globo de tiempo que aparece al pasar el cursor en la barra de progreso de LibreVideoJS, esta funcionalidad solo es posible con jQuery 2.1.1 o superior. Tiene un demo para observar su funcionamiento.

También hay un screenshot para pre-visualizar ProgreesTips.

Para hacer funcionar ProgreesTips es necesario tener el archivo JavaScript cliplibrejs.developer.js reemplazando al archivo JavaScript cliplibrejs.dev.js.

Para implementarlo agregamos en el <head> lo siguiente:

<link rel="stylesheet" href="https://tudominio.example/css/proggrestips/proggrestips.css">
<script src="https://tudominio.example/js/cliplibrejs.developer.js"></script>

Y luego agregamos antes de la etiqueta </body> el siguiente código JavaScript

<script>
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
cliplibrejs( '#example', {}, function() {this.progressTips();} );
// @license-end
</script>

Si desea combinar dos funciones Hotkeys + ProgreesTips, puede usar el código simplificado:

<script>
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
cliplibrejs("#example",{plugins:{resolutionSelector:{force_types:["video/webm","video/ogg"],default_res:"480p"}},nativeControlsForTouch:false}).ready(function(){this.hotkeys({volumeStep:0.1,seekStep:5,enableMute:true,enableFullscreen:true,enableNumbers:true}),this.progressTips()});
// @license-end
</script>

Si desea combinar las Tres funciones Quality Selector + Hotkeys + ProgreesTips, puede usar el código simplificado:

<script>
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
cliplibrejs("#example",{plugins:{resolutionSelector:{force_types:["video/webm","video/ogg"],default_res:"480p"}},nativeControlsForTouch:false}).ready(function(){this.hotkeys({volumeStep:0.1,seekStep:5,enableMute:true,enableFullscreen:true,enableNumbers:true,}),this.progressTips()});
// @license-end
</script>

Si desea ver una demostración de LibreVideoJS puede visitar ConocimientosLibres, Freakspot.net

Demos

Contribuir

LibreVideoJS es una librería de Software Libre, y apreciamos cualquier ayuda que estés dispuesto a dar.

También puede visitar goblinrefuge, donde encontrará un vídeo mostrando su funcionalidad.

Licencia

LibreVideoJS está bajo la licencia GNU GPLv3+

Escrito en GNU/Linux-Libre

Contributors:
- Jesús E.
- Jorge Maldonado Ventura
FullYear: 2017

README.md