Browse Source

move script playlist to file JS and fix support librejs

pull/1/head
Jesús 1 year ago
parent
commit
b1a66af7a9
Signed by: Jesús <heckyel@hyperbola.info> GPG Key ID: F6EE7BC59A315766
3 changed files with 60 additions and 56 deletions
  1. +2
    -56
      content/curso-de-instalacion-de-hyperbola.md
  2. +5
    -0
      content/pages/libreJS.md
  3. +53
    -0
      content/vendor/js/videoplaylist.js

+ 2
- 56
content/curso-de-instalacion-de-hyperbola.md View File

@@ -15,7 +15,7 @@ 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
de 6 vídeos:

<video id="video" class="player-ply" playsinline controls poster='{static}/wp-content/uploads/article/images/2018/05/curso-hyperbola-1.png'>
<video id="videoplaylist" 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"/>
<p>Lo siento, tu navegador no soporta vídeo en HTML5. Por favor, cambia o actualiza tu navegador web</p>
</video>
@@ -64,61 +64,7 @@ de 6 vídeos:
<!--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>
<script src="{static}/vendor/js/videoplaylist.js"></script>
<!-- /playlist -->

[hypersite]: https://www.hyperbola.info/

+ 5
- 0
content/pages/libreJS.md View File

@@ -17,6 +17,11 @@ Title: LibreJS
<td><a href="../vendor/js/play.js">play.js</a></td>
</tr>
<tr>
<td><a href="../vendor/js/videoplaylist.js">videoplaylist.js</a></td>
<td><a href="http://www.gnu.org/licenses/gpl-3.0.html">GPL-3.0</a></td>
<td><a href="../vendor/js/videoplaylist.js">videoplaylist.js</a></td>
</tr>
<tr>
<td><a href="../theme/js/navbar-burger.js">navbar-burger.js</a></td>
<td><a href="http://www.gnu.org/licenses/gpl-3.0.html">GPL-3.0</a></td>
<td><a href="../theme/js/navbar-burger.js">navbar-burger.js</a></td>

+ 53
- 0
content/vendor/js/videoplaylist.js View File

@@ -0,0 +1,53 @@
init();

function init(){
var video = document.getElementById('videoplaylist');
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();
}

Loading…
Cancel
Save