diff options
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 158 |
1 files changed, 158 insertions, 0 deletions
diff --git a/README.md b/README.md new file mode 100644 index 0000000..374d027 --- /dev/null +++ b/README.md @@ -0,0 +1,158 @@ +LibreVideoJS +================== + +LibreVideoJS es un reproductor de Vídeo escrito en JavaScript compatible con [LibreJS](https://www.gnu.org/software/librejs/index.html), construido con una tipografía personalizada en Material Desing para un mundo Libre. + +Repositorio de los archivos bases sin modificación. + +* [Base en VideoJS](https://github.com/videojs/video.js) + +## 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](https://notabug.org/Heckyel/LibreVideoJS/archive/master.tar.gz) y ejecutar un [demo](demo-mix-multicolors.html) con tu Navegador Libre Favorito. +2. Clona el repositorio en cualquier carpeta del servidor o en tu directorio local (e.g. 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>`: + +```html +<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). + +```html +<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 esta habilitado, y sino esta habilitado muestra +el reproductor de vídeo por defecto del navegador. + +```html +<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 + +```html +<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: +```html +<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: +```html +<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 + +```html +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](https://jquery.com/). Tiene un [demo](demo-progreestips.html) 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](js/cliplibrejs.developer.js) reemplazando al archivo JavaScript __cliplibrejs.dev.js__. + +Para implementarlo agregamos en el `<head>` lo siguiente: + +```html +<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 +```html +<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: + +```html +<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: +```html +<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](https://www.conocimientoslibres.tuxfamily.org), [Freakspot.net](https://www.freakspot.net/locutus-de-gnu/)_ + +## Demos ++ [demo](demo.html) ++ [demo-custom-material-multicolors](demo-custom-material-multicolors.html) ++ [demo-custom-material](demo-custom-material.html) ++ [demo-custom-skin](demo-custom-skin.html) ++ [demo-default-progreestips](demo-default-progreestips.html) ++ [demo-mix-material](demo-mix-material.html) ++ [demo-mix-multicolors](demo-mix-multicolors.html) ++ [demo-progreestips-multicolors](demo-progreestips-multicolors.html) ++ [demo-progreestips](demo-progreestips.html) ++ [example-hotkeys](example-hotkeys.html) + +## Contribuir +LibreVideoJS es una librería de [Software Libre](https://www.gnu.org/), y apreciamos cualquier ayuda que estés dispuesto a dar. + +También puede visitar [goblinrefuge](https://goblinrefuge.com/mediagoblin/u/cybersy/m/librevideojs/), donde encontrará un vídeo mostrando su funcionalidad. + +## Licencia + +LibreVideoJS esta bajo la licencia GNU GPLv3+ [Ver el archivo de licencia](LICENSE) + +[Escrito en GNU/Linux-Libre](https://www.gnu.org/distros/free-distros.es.html) +* Contributor: Jesús Eduardo +* City: Tumbes +* Country: Perú +* FullYear: 2017 |