صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
heckyel
/
librevideojs
mirrorاز https://c.hgit.ga/software/librevideojs.git
دنبال کردن 1
ستاره دار 0
انشعاب 0
پرونده‌ها

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

شاخه: master
شاخه‌ها تگ‌ها
librevideojs
ZIP TAR.GZ
Jesús Eduardo 351168e0c2 change to author lowercase 7 سال پیش
css d20da4f325 First commit 7 سال پیش
fonts d20da4f325 First commit 7 سال پیش
images ee30b1a54d Compress Images 7 سال پیش
js d20da4f325 First commit 7 سال پیش
src d20da4f325 First commit 7 سال پیش
subtitles d20da4f325 First commit 7 سال پیش
LICENSE d20da4f325 First commit 7 سال پیش
README.md 351168e0c2 change to author lowercase 7 سال پیش
bower.json d20da4f325 First commit 7 سال پیش
demo-custom-material-multicolors.html d20da4f325 First commit 7 سال پیش
demo-custom-material.html d20da4f325 First commit 7 سال پیش
demo-custom-skin.html d20da4f325 First commit 7 سال پیش
demo-default-progreestips.html d20da4f325 First commit 7 سال پیش
demo-mix-material.html d20da4f325 First commit 7 سال پیش
demo-mix-multicolors.html d20da4f325 First commit 7 سال پیش
demo-progreestips-multicolors.html d20da4f325 First commit 7 سال پیش
demo-progreestips.html d20da4f325 First commit 7 سال پیش
demo.html d20da4f325 First commit 7 سال پیش
example-hotkeys.html d20da4f325 First commit 7 سال پیش
humans.txt d20da4f325 First commit 7 سال پیش

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