diff --git a/help/gitlab-pages.html b/help/gitlab-pages.html index 1baddbe24feb70a246e7ee7657faf0036a5a1157..ac21fea717f4a4fd2eb38cb002b75bbf2a481f70 100644 --- 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> diff --git a/js/player.js b/js/player.js new file mode 100644 index 0000000000000000000000000000000000000000..cb250bfb52620bca97e275314ab416ea9387b53b --- /dev/null +++ b/js/player.js @@ -0,0 +1,66 @@ +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