LibreVideoJS es un reproductor de Vídeo escrito en ECMAScript (JavaScript) compatible con LibreJS.
Jesús Eduardo 351168e0c2 change to author lowercase | преди 7 години | |
---|---|---|
css | преди 7 години | |
fonts | преди 7 години | |
images | преди 7 години | |
js | преди 7 години | |
src | преди 7 години | |
subtitles | преди 7 години | |
LICENSE | преди 7 години | |
README.md | преди 7 години | |
bower.json | преди 7 години | |
demo-custom-material-multicolors.html | преди 7 години | |
demo-custom-material.html | преди 7 години | |
demo-custom-skin.html | преди 7 години | |
demo-default-progreestips.html | преди 7 години | |
demo-mix-material.html | преди 7 години | |
demo-mix-multicolors.html | преди 7 години | |
demo-progreestips-multicolors.html | преди 7 години | |
demo-progreestips.html | преди 7 години | |
demo.html | преди 7 години | |
example-hotkeys.html | преди 7 години | |
humans.txt | преди 7 години |
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.
git clone https://notabug.org/Heckyel/LibreVideoJS.git /var/www/html/LibreVideoJS
).css
, fonts
y js
en la raíz del servidor web.<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>
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>
bower install librevideojs
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
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.
LibreVideoJS está bajo la licencia GNU GPLv3+