Browse Source

move script playlist to file JS and fix support librejs

Jesús 8 months ago
parent
commit
b1a66af7a9
Signed by: Jesús <heckyel@hyperbola.info> GPG Key ID: F6EE7BC59A315766

+ 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
15 15
 en una guía de instalación, bien abajo se encuentra una lista
16 16
 de 6 vídeos:
17 17
 
18
-<video id="video" class="player-ply" playsinline controls poster='{static}/wp-content/uploads/article/images/2018/05/curso-hyperbola-1.png'>
18
+<video id="videoplaylist" class="player-ply" playsinline controls poster='{static}/wp-content/uploads/article/images/2018/05/curso-hyperbola-1.png'>
19 19
     <source src="https://archive.org/download/hyperbola-video-1/Hyperbola%20Base%20%2B%20Usuario%201%E2%81%846.webm" type="video/webm"/>
20 20
     <p>Lo siento, tu navegador no soporta vídeo en HTML5. Por favor, cambia o actualiza tu navegador web</p>
21 21
 </video>
@@ -64,61 +64,7 @@ de 6 vídeos:
64 64
 <!--EndPlyr-->
65 65
 
66 66
 <!-- playlist -->
67
-<script>
68
-init();
69
-
70
-function init(){
71
-    var video = document.getElementById('video');
72
-    var playlist = document.getElementById('playlist');
73
-    var tracks = playlist.getElementsByTagName('a');
74
-    video.volume = 0.50;
75
-
76
-    //Cuenta los tracks
77
-    for(var track in tracks) {
78
-        var link = tracks[track];
79
-        if(typeof link === "function" || typeof link === "number") continue;
80
-        link.addEventListener('click', function(e) {
81
-            e.preventDefault();
82
-            var song = this.getAttribute('href');
83
-            run(song, video, this);
84
-        });
85
-    }
86
-    //Agregamos evento para reproducir el siguiente items
87
-    video.addEventListener('ended',function(e) {
88
-        for(var track in tracks) {
89
-            var link = tracks[track];
90
-            var nextTrack = parseInt(track) + 1;
91
-            if(typeof link === "function" || typeof link === "number") continue;
92
-            if(!this.src) this.src = tracks[0];
93
-            if(track == (tracks.length - 1)) nextTrack = 0;
94
-            console.log(nextTrack);
95
-            if(link.getAttribute('href') === this.src) {
96
-                var nextLink = tracks[nextTrack];
97
-                run(nextLink.getAttribute('href'), video, nextLink);
98
-                break;
99
-            }
100
-        }
101
-    });
102
-}
103
-
104
-function run(song, video, link){
105
-    var parent = link.parentElement;
106
-    //Quita el active de todos los elementos de la lista
107
-    var items = parent.parentElement.getElementsByTagName('li');
108
-    for(var item in items) {
109
-        if(items[item].classList)
110
-            items[item].classList.remove("is-active-play");
111
-    }
112
-
113
-    //Agrega active a este elemento
114
-    parent.classList.add("is-active-play");
115
-
116
-    //Inicia la reproducción
117
-    video.src = song;
118
-    video.load();
119
-    video.play();
120
-}
121
-</script>
67
+<script src="{static}/vendor/js/videoplaylist.js"></script>
122 68
 <!-- /playlist -->
123 69
 
124 70
 [hypersite]: https://www.hyperbola.info/

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

@@ -17,6 +17,11 @@ Title: LibreJS
17 17
         <td><a href="../vendor/js/play.js">play.js</a></td>
18 18
     </tr>
19 19
     <tr>
20
+        <td><a href="../vendor/js/videoplaylist.js">videoplaylist.js</a></td>
21
+        <td><a href="http://www.gnu.org/licenses/gpl-3.0.html">GPL-3.0</a></td>
22
+        <td><a href="../vendor/js/videoplaylist.js">videoplaylist.js</a></td>
23
+    </tr>
24
+    <tr>
20 25
         <td><a href="../theme/js/navbar-burger.js">navbar-burger.js</a></td>
21 26
         <td><a href="http://www.gnu.org/licenses/gpl-3.0.html">GPL-3.0</a></td>
22 27
         <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 @@
1
+init();
2
+
3
+function init(){
4
+    var video = document.getElementById('videoplaylist');
5
+    var playlist = document.getElementById('playlist');
6
+    var tracks = playlist.getElementsByTagName('a');
7
+    video.volume = 0.50;
8
+
9
+    //Cuenta los tracks
10
+    for(var track in tracks) {
11
+        var link = tracks[track];
12
+        if(typeof link === "function" || typeof link === "number") continue;
13
+        link.addEventListener('click', function(e) {
14
+            e.preventDefault();
15
+            var song = this.getAttribute('href');
16
+            run(song, video, this);
17
+        });
18
+    }
19
+    //Agregamos evento para reproducir el siguiente items
20
+    video.addEventListener('ended',function(e) {
21
+        for(var track in tracks) {
22
+            var link = tracks[track];
23
+            var nextTrack = parseInt(track) + 1;
24
+            if(typeof link === "function" || typeof link === "number") continue;
25
+            if(!this.src) this.src = tracks[0];
26
+            if(track == (tracks.length - 1)) nextTrack = 0;
27
+            console.log(nextTrack);
28
+            if(link.getAttribute('href') === this.src) {
29
+                var nextLink = tracks[nextTrack];
30
+                run(nextLink.getAttribute('href'), video, nextLink);
31
+                break;
32
+            }
33
+        }
34
+    });
35
+}
36
+
37
+function run(song, video, link){
38
+    var parent = link.parentElement;
39
+    //Quita el active de todos los elementos de la lista
40
+    var items = parent.parentElement.getElementsByTagName('li');
41
+    for(var item in items) {
42
+        if(items[item].classList)
43
+            items[item].classList.remove("is-active-play");
44
+    }
45
+
46
+    //Agrega active a este elemento
47
+    parent.classList.add("is-active-play");
48
+
49
+    //Inicia la reproducción
50
+    video.src = song;
51
+    video.load();
52
+    video.play();
53
+}