heckyel/cl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added videoplaylist

Browse Source
This commit is contained in:
Jesús 2019-03-23 18:52:41 -05:00
parent 72a15cc2dd
commit 179c25c653
No known key found for this signature in database
GPG Key ID: F6EE7BC59A315766
2 changed files with 118 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
cl-theme/static/css/style.css
View File

@ -2,7 +2,7 @@
* bulma css framework (github.com/jgthms | bulma.io) * bulma css framework (github.com/jgthms | bulma.io)
* Author: jeremy thomas * Author: jeremy thomas
* Author: jesus e. * Author: jesus e.
* Version: 1.0.1 * Version: 1.0.2
* Licensed under MIT (https://github.com/jgthms/bulma/blob/master/LICENSE) * Licensed under MIT (https://github.com/jgthms/bulma/blob/master/LICENSE)
*/ */
/* basic formatting changes (mostly to cater for darker colours) */ /* basic formatting changes (mostly to cater for darker colours) */
@ -115,6 +115,25 @@ video {
display: table; display: table;
} }
.play-menu {
height: 200px;
overflow-y: auto;
}
.play-menu a {
color: white;
}
.play-menu a:hover {
background-color: #484848;
color: #fff;
}
.is-active-play {
color: #dd7325;
background-color: #dd7325;
}
/* Colors Code */ /* Colors Code */
.highlight { .highlight {
background: #000000; background: #000000;

137
content/curso-de-instalacion-de-hyperbola.md
View File

@ -4,6 +4,7 @@ CSS: plyr/plyr.css
Date: 2018-05-29 08:57 Date: 2018-05-29 08:57
Image: 2018/05/curso-hyperbola-gnu-linux.png Image: 2018/05/curso-hyperbola-gnu-linux.png
JS: plyr/plyr.js (bottom) JS: plyr/plyr.js (bottom)
Lang: es
Slug: curso-de-instalacion-de-hyperbola Slug: curso-de-instalacion-de-hyperbola
Tags: hyperbola, linux, linux-libre, parabola Tags: hyperbola, linux, linux-libre, parabola
Title: Curso de Instalación de Hyperbola Title: Curso de Instalación de Hyperbola
@ -14,52 +15,110 @@ una de las distros 100 % libres, el método de Instalación se basa
en una guía de instalación, bien abajo se encuentra una lista en una guía de instalación, bien abajo se encuentra una lista
de 6 vídeos: de 6 vídeos:
**Hyperbola [Base + Usuario] 1⁄6 | Time: 1:06:45** <video id="video" class="player-ply" playsinline controls poster='{static}/wp-content/uploads/article/images/2018/05/curso-hyperbola-1.png'>
<source src="https://archive.org/download/hyperbola-video-1/Hyperbola%20Base%20%2B%20Usuario%201%E2%81%846.webm" type="video/webm"/>
<video class="player-ply" playsinline controls poster='{static}/wp-content/uploads/article/images/2018/05/curso-hyperbola-1.png'> <p>Lo siento, tu navegador no soporta vídeo en HTML5. Por favor, cambia o actualiza tu navegador web</p>
<source src="https://archive.org/download/hyperbola-video-1/Hyperbola%20Base%20%2B%20Usuario%201%E2%81%846.webm" type="video/webm"/>
<p>Lo siento, tu navegador no soporta vídeo en HTML5. Por favor, cambia o actualiza tu navegador web</p>
</video> </video>
**Hyperbola [Xorg] 2⁄6 | Time: 23:38** ## Lista de vídeos
<video class="player-ply" playsinline controls poster='{static}/wp-content/uploads/article/images/2018/05/curso-hyperbola-2.png'> <aside class="menu">
<source src="https://archive.org/download/hyperbola-video-2/Hyperbola%20Xorg%202%E2%81%846.webm" type="video/webm"/> <ul id="playlist" class="menu-list play-menu">
<p>Lo siento, tu navegador no soporta vídeo en HTML5. Por favor, cambia o actualiza tu navegador web</p> <li class="is-active-play">
</video> <a href="https://archive.org/download/hyperbola-video-1/Hyperbola%20Base%20%2B%20Usuario%201%E2%81%846.webm">
Hyperbola [Base + Usuario] 1⁄6 | Time: 1:06:45
</a>
</li>
<li>
<a href="https://archive.org/download/hyperbola-video-2/Hyperbola%20Xorg%202%E2%81%846.webm">
Hyperbola [Xorg] 2⁄6 | Time: 23:38
</a>
</li>
<li>
<a href="https://archive.org/download/hyperbola_20180527/Hyperbola%20XFCE%203%E2%81%846.webm">
Hyperbola [XFCE] 3⁄6 | Time: 20:06
</a>
</li>
<li>
<a href="https://archive.org/download/hyperbola_20180527_2333/Hyperbola%20Fixed%20Idioma%204%E2%81%84%E2%81%846.webm">
Hyperbola [Fixed Idioma] 4⁄6 | Time: 6:31
</a>
</li>
<li>
<a href="https://archive.org/download/hyperbola-video-5/Hyperbola%20Gestor%20de%20Inicio%20de%20Sesi%C3%B3n%20SLIM%205%E2%81%846.webm">
Hyperbola [Gestor de Inicio de Sesión SLIM] 5⁄6 | Time: 7:23
</a>
</li>
<li>
<a href="https://archive.org/download/hyperbola-video-6/Hyperbola%20-%20Utilidades%206%E2%81%846.webm">
Hyperbola [Utilidades] 6⁄6 | Time: 34:14
</a>
</li>
</ul>
</aside>
**Hyperbola [XFCE] 3⁄6 | Time: 20:06** >Y, bien hasta aquí ya es posible instalar Hyperbola GNU+Linux-Libre, de manera sencilla.
<video class="player-ply" playsinline controls poster='{static}/wp-content/uploads/article/images/2018/05/curso-hyperbola-3.png'>
<source src="https://archive.org/download/hyperbola_20180527/Hyperbola%20XFCE%203%E2%81%846.webm" type="video/webm"/>
<p>Lo siento, tu navegador no soporta vídeo en HTML5. Por favor, cambia o actualiza tu navegador web</p>
</video>
**Hyperbola [Fixed Idioma] 4⁄6 | Time: 6:31**
<video class="player-ply" playsinline controls poster='{static}/wp-content/uploads/article/images/2018/05/curso-hyperbola-4.png'>
<source src="https://archive.org/download/hyperbola_20180527_2333/Hyperbola%20Fixed%20Idioma%204%E2%81%84%E2%81%846.webm" type="video/webm"/>
<p>Lo siento, tu navegador no soporta vídeo en HTML5. Por favor, cambia o actualiza tu navegador web</p>
</video>
**Hyperbola [Gestor de Inicio de Sesión SLIM] 5⁄6 | Time: 7:23**
<video class="player-ply" playsinline controls poster='{static}/wp-content/uploads/article/images/2018/05/curso-hyperbola-5.png'>
<source src="https://archive.org/download/hyperbola-video-5/Hyperbola%20Gestor%20de%20Inicio%20de%20Sesi%C3%B3n%20SLIM%205%E2%81%846.webm" type="video/webm"/>
<p>Lo siento, tu navegador no soporta vídeo en HTML5. Por favor, cambia o actualiza tu navegador web</p>
</video>
**Hyperbola [Utilidades] 6⁄6 | Time: 34:14**
<video class="player-ply" playsinline controls poster='{static}/wp-content/uploads/article/images/2018/05/curso-hyperbola-6.png'>
<source src="https://archive.org/download/hyperbola-video-6/Hyperbola%20-%20Utilidades%206%E2%81%846.webm" type="video/webm"/>
<p>Lo siento, tu navegador no soporta vídeo en HTML5. Por favor, cambia o actualiza tu navegador web</p>
</video>
Y, bien hasta aquí ya es posible instalar Hyperbola GNU+Linux-Libre, de manera sencilla.
<!--Plyr--> <!--Plyr-->
<script src="{static}/vendor/js/play.js"></script> <script src="{static}/vendor/js/play.js"></script>
<!--EndPlyr--> <!--EndPlyr-->
<!-- playlist -->
<script>
init();
function init(){
var video = document.getElementById('video');
var playlist = document.getElementById('playlist');
var tracks = playlist.getElementsByTagName('a');
video.volume = 0.50;
//Cuenta los tracks
for(var track in tracks) {
var link = tracks[track];
if(typeof link === "function" || typeof link === "number") continue;
link.addEventListener('click', function(e) {
e.preventDefault();
var song = this.getAttribute('href');
run(song, video, this);
});
}
//Agregamos evento para reproducir el siguiente items
video.addEventListener('ended',function(e) {
for(var track in tracks) {
var link = tracks[track];
var nextTrack = parseInt(track) + 1;
if(typeof link === "function" || typeof link === "number") continue;
if(!this.src) this.src = tracks[0];
if(track == (tracks.length - 1)) nextTrack = 0;
console.log(nextTrack);
if(link.getAttribute('href') === this.src) {
var nextLink = tracks[nextTrack];
run(nextLink.getAttribute('href'), video, nextLink);
break;
}
}
});
}
function run(song, video, link){
var parent = link.parentElement;
//Quita el active de todos los elementos de la lista
var items = parent.parentElement.getElementsByTagName('li');
for(var item in items) {
if(items[item].classList)
items[item].classList.remove("is-active-play");
}
//Agrega active a este elemento
parent.classList.add("is-active-play");
//Inicia la reproducción
video.src = song;
video.load();
video.play();
}
</script>
<!-- /playlist -->
[hypersite]: https://www.hyperbola.info/ [hypersite]: https://www.hyperbola.info/