Add videos player for help videos

Used the plyr.js library. This is a first attempt. Should not be merged with the master yet.

Add videos player for help videos
Used the plyr.js library. This is a first attempt. Should not be merged with the master yet.
6c2ca746 · Athanasios · d642f3d1 · 6c2ca746 · 6c2ca746
Commit 6c2ca746 authored 3 years ago by Athanasios
Hide whitespace changes
Inline Side-by-side

Showing

with 86 additions and 1 deletion
+86 -1
--- a/help/gitlab-pages.html
+++ b/help/gitlab-pages.html
@@ -13,6 +13,7 @@
    <link rel="stylesheet" href="/css/Testimonials.css">
    <link rel="stylesheet" href="/css/help.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
+    <link href="https://cdn.plyr.io/3.6.9/plyr.css" rel="stylesheet" />
 </head>

 <body>
@@ -595,7 +596,22 @@
                                    </p>
                                    <img src="/img/help/generic.png"/>
                                </div>
-                            </div>                            
+                            </div>    
+                            
+                            <br/>
+                            
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        <a class="collapsed" data-toggle="collapse" href="#collapse10t" aria-expanded="false" aria-controls="collapse10t">
+                                        <small>Videoanleitung</small></a>
+                                    </h3>
+                                </div>
+                                <div id="collapse10t" class="card-body collapse">
+                                    <video id="player" playsinline controls></video>
+                                    <button id="next">Next</button>
+                                </div>
+                            </div>  

                        </div>
                </div>
@@ -645,6 +661,9 @@
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 <script src="/js/headfoot.js"></script>
 <script src="/js/mobile.js"></script>
+<script src="https://cdn.plyr.io/3.6.9/plyr.js"></script>
+<script src="/js/player.js"></script>
+
 </body>

 </html>
--- a/js/player.js
+++ b/js/player.js
+const player = new Plyr('#player', {
+  captions: { active: true, language: 'de', update: false }
+});
+
+player.source = {
+  type: 'video',
+  title: 'geology',
+  sources: [
+    {
+      src: 'videos/reactive.mp4',
+      type: 'video/mp4'
+    }
+  ],
+  tracks: [
+    {
+      kind: 'captions',
+      label: 'German',
+      srclang: 'de',
+      src: 'videos/reactive_de.vtt',
+      default: true,
+    },
+    {
+      kind: 'captions',
+      label: 'English',
+      srclang: 'en',
+      src: 'videos/reactive_en.vtt'
+    },
+  ],
+};
+
+
+let btn = document.getElementById("next");
+
+
+btn.onclick = () => {
+
+  player.source = {
+    type: 'video',
+    title: 'geology',
+    sources: [
+      {
+        src: 'videos/geology.mp4',
+        type: 'video/mp4',
+        size: 720,
+      }
+    ],
+    tracks: [
+      {
+        kind: 'captions',
+        label: 'German',
+        srclang: 'de',
+        src: 'videos/geology_de.vtt',
+        default: true,
+      },
+      {
+        kind: 'captions',
+        label: 'English',
+        srclang: 'en',
+        src: 'videos/geology_en.vtt'
+      },
+    ],
+  };
+  player.play();
+
+
+};
\ No newline at end of file