Home Explore Help
Sign In
heckyel
/
librevideojs
mirror of https://c.hgit.ga/software/librevideojs.git
Watch 1
Star 0
Fork 0
Files

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

Tree: 351168e0c2
Branches Tags
librevideojs
ZIP TAR.GZ
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

README.md

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.

Guía de inicio rápido

  1. 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.
  2. 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).
  3. Agrega o combina los directorios css, fonts y js en la raíz del servidor web.
  4. 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. Alt 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