1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
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 (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>`:
```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 está habilitado, y sino está 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 está bajo la licencia <a href="https://notabug.org/heckyel/LibreVideoJS/src/master/LICENSE" rel="license"><abbr title="General Public License version 3 o superior">GNU GPLv3+</abbr>
[Escrito en GNU/Linux-Libre](https://www.gnu.org/distros/free-distros.es.html)
* Contributors:
- Jesús E.
- Jorge Maldonado Ventura
* FullYear: 2017
|
