Skip to content

GitLab

Commit 6b11573e authored by Koukofikis's avatar Koukofikis
Browse files

Merge branch 'MLAB-615' into 'testing' 

Added a video player for each template card

See merge request !147
parents ac8bd28a 8be0e9a0
Pipeline #5707 passed with stage
in 30 seconds
Show whitespace changes
Inline Side-by-side
css/m4lab.css
View file @ 6b11573e
...@@ -627,3 +627,7 @@ justify-content:space-evenly;} ...@@ -627,3 +627,7 @@ justify-content:space-evenly;}
padding: 10px; /* Some padding */ padding: 10px; /* Some padding */
font-size: 18px; /* Increase font size */ font-size: 18px; /* Increase font size */
} }
.video-tutorial {
width: 100%;
}
\ No newline at end of file
help/gitlab-pages.html
View file @ 6b11573e
...@@ -556,6 +556,11 @@ ...@@ -556,6 +556,11 @@
</div> </div>
<div id="collapse7t" class="card-body collapse"> <div id="collapse7t" class="card-body collapse">
<p>Dies is eine Vorlage mit einer einzigen Seite. Um den Inhalt anzupassen, ändern Sie die Datei index.html.</p> <p>Dies is eine Vorlage mit einer einzigen Seite. Um den Inhalt anzupassen, ändern Sie die Datei index.html.</p>
<video class="video-tutorial" playsinline controls>
<source src="videos/reactive.mp4" type="video/mp4" />
<track kind="captions" label="German" src="videos/reactive_de.vtt" srclang="de" default />
<track kind="captions" label="English" src="videos/reactive_en.vtt" srclang="en" default />
</video>
</div> </div>
</div> </div>
...@@ -573,6 +578,11 @@ ...@@ -573,6 +578,11 @@
Diese Vorlage hat eine einzelne Seite und ist für die Präsentation einer Studienarbeit (Bachelor- / Masterarbeit) gedacht. Im Home-Ordner müssen Sie die Dateien für Ihre Titelseite und die pdf Ihrer Arbeit austauschen. Klicken Sie dazu auf den 'Replace'-Knopf Diese Vorlage hat eine einzelne Seite und ist für die Präsentation einer Studienarbeit (Bachelor- / Masterarbeit) gedacht. Im Home-Ordner müssen Sie die Dateien für Ihre Titelseite und die pdf Ihrer Arbeit austauschen. Klicken Sie dazu auf den 'Replace'-Knopf
<img src="/img/help/cover_thesis.png" width="95%"/> <img src="/img/help/cover_thesis.png" width="95%"/>
Anschließend müssen in der Datei index.html Ihr Name, das Jahr etc. angepasst werden. Anschließend müssen in der Datei index.html Ihr Name, das Jahr etc. angepasst werden.
<video class="video-tutorial" playsinline controls>
<source src="videos/geology.mp4" type="video/mp4" />
<track kind="captions" label="German" src="videos/geology_de.vtt" srclang="de" default />
<track kind="captions" label="English" src="videos/geology_en.vtt" srclang="en" default />
</video>
</p> </p>
</div> </div>
</div> </div>
...@@ -595,23 +605,14 @@ ...@@ -595,23 +605,14 @@
Die Startseite deutet dabei immer auf den Ordner home, wenn Sie also die Startseite ändern wollen, müssen Sie den Ordner in 'home' umbenennen. Die Startseite deutet dabei immer auf den Ordner home, wenn Sie also die Startseite ändern wollen, müssen Sie den Ordner in 'home' umbenennen.
</p> </p>
<img src="/img/help/generic.png"/> <img src="/img/help/generic.png"/>
<video class="video-tutorial" playsinline controls>
<source src="videos/serene.mp4" type="video/mp4" />
<track kind="captions" label="German" src="videos/serene_de.vtt" srclang="de" default />
<track kind="captions" label="English" src="videos/serene_en.vtt" srclang="en" default />
</video>
</div> </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>
</div> </div>
...@@ -662,7 +663,6 @@ ...@@ -662,7 +663,6 @@
<script src="/js/headfoot.js"></script> <script src="/js/headfoot.js"></script>
<script src="/js/mobile.js"></script> <script src="/js/mobile.js"></script>
<script src="https://cdn.plyr.io/3.6.9/plyr.js"></script> <script src="https://cdn.plyr.io/3.6.9/plyr.js"></script>
<script src="/js/player.js"></script>
</body> </body>
......
help/videos/geology_de.vtt
View file @ 6b11573e
WEBVTT WEBVTT
1 00:00:27.214 --> 00:00:32.386
00:00:21.471 --> 00:00:26.643 Melden Sie sich bei Ihrem Portalkonto an
Melden Sie sich bei Ihrem Portalkonto an und erstellen Sie ein neues Projekt und erstellen Sie ein neues Projekt
2 00:01:03.843 --> 00:01:08.614
00:00:52.343 --> 00:00:57.114
Öffnen Sie Ihr Projekt im Transferportal gitlab Öffnen Sie Ihr Projekt im Transferportal gitlab
3 00:01:18.971 --> 00:01:24.029
00:01:03.114 --> 00:01:08.171 Laden Sie Logos oder Bilder
Laden Sie das Logo und die Bilder in den öffentlichen Ordner hoch in den öffentlichen Ordner hoch
4 00:01:56.371 --> 00:02:01.586
00:01:56.929 --> 00:02:01.157 Bearbeiten Sie die Einstellungen
Laden Sie die Diagrammfigur in den Home-Ordner hoch für die Seite und die Teilnehmer
5 00:03:45.850 --> 00:03:48.867
00:02:16.328 --> 00:02:21.541 Entfernen Sie den zweiten Teilnehmer
Bearbeiten Sie die Einstellungen für die Seite und die Teilnehmer
6 00:04:23.133 --> 00:04:24.700
00:04:21.043 --> 00:04:24.329
Entfernen Sie den persönlichen Website-Eintrag
7
00:05:23.686 --> 00:05:25.243
Speichern Sie die Änderungen Speichern Sie die Änderungen
8 00:04:34.500 --> 00:04:37.467
00:05:34.243 --> 00:05:36.114 Ersetzen Sie das Cover der Abschlussarbeit
Bearbeiten Sie die Startseite
9 00:04:59.167 --> 00:05:01.850
00:06:51.329 --> 00:06:54.271 Ersetzen Sie die PDF-Datei der Abschlussarbeit
Ändern Sie die Quelle des Bildes
10 00:05:40.150 --> 00:05:42.017
00:07:25.986 --> 00:07:29.914 Bearbeiten Sie die Startseite
Entfernen Sie den Rest des Vorlageninhalts
11 00:08:06.683 --> 00:08:08.350
00:08:00.057 --> 00:08:01.714
Speichern Sie die Änderungen Speichern Sie die Änderungen
12 00:08:15.200 --> 00:08:19.833
00:08:14.186 --> 00:08:18.814 Warten Sie einige Sekunden,
Warten Sie einige Sekunden, bis die Webseite veröffentlicht wird bis die Webseite veröffentlicht wird
13 00:08:21.033 --> 00:08:23.717
00:08:40.771 --> 00:08:42.414
Immer noch am arbeiten...
14
00:08:50.271 --> 00:08:52.943
Ihre Webseite ist veröffentlicht Ihre Webseite ist veröffentlicht
15 00:08:34.250 --> 00:08:35.583
00:09:11.086 --> 00:09:12.429
Besuchen Sie die URL Besuchen Sie die URL
\ No newline at end of file
help/videos/geology_en.vtt
View file @ 6b11573e
WEBVTT WEBVTT
1 1
00:00:21.471 --> 00:00:26.643 00:00:27.214 --> 00:00:32.386
Sign into your portal account Sign into your portal account
and create a new project and create a new project
2 2
00:00:52.343 --> 00:00:57.114 00:01:03.843 --> 00:01:08.614
Open your project in the transfer portal gitlab Open your project in the transfer portal gitlab
3 3
00:01:03.114 --> 00:01:08.171 00:01:18.971 --> 00:01:24.029
Upload the logo Upload any logos
and the images into the public folder or images into the public folder
4 4
00:01:56.929 --> 00:02:01.157 00:01:56.371 --> 00:02:01.586
Upload the chart figure
into the home folder
5
00:02:16.328 --> 00:02:21.541
Edit the settings for the Edit the settings for the
page and the participants page and the participants
5
00:03:45.850 --> 00:03:48.867
Remove the second participant
6 6
00:04:21.043 --> 00:04:24.329 00:04:23.133 --> 00:04:24.700
Remove the personal website entry Save the changes
7 7
00:05:23.686 --> 00:05:25.243 00:04:34.500 --> 00:04:37.467
Save the changes Replace the cover of the thesis
8 8
00:05:34.243 --> 00:05:36.114 00:04:59.167 --> 00:05:01.850
Edit the home page Replace the thesis PDF file
9 9
00:06:51.329 --> 00:06:54.271 00:05:40.150 --> 00:05:42.017
Change the source of the image Edit the home page
10 10
00:07:25.986 --> 00:07:29.914 00:08:06.683 --> 00:08:08.350
Remove the rest of the template content
11
00:08:00.057 --> 00:08:01.714
Save the changes Save the changes
12 11
00:08:14.186 --> 00:08:18.814 00:08:15.200 --> 00:08:19.833
Wait a few seconds for the web page Wait a few seconds for the web page
to be published to be published
13 12
00:08:40.771 --> 00:08:42.414 00:08:21.033 --> 00:08:23.717
Still working...
14
00:08:50.271 --> 00:08:52.943
Your web page is published Your web page is published
15 13
00:09:11.086 --> 00:09:12.429 00:08:34.250 --> 00:08:35.583
Visit the URL Visit the URL
help/videos/reactive_de.vtt
View file @ 6b11573e
...@@ -2,7 +2,8 @@ WEBVTT ...@@ -2,7 +2,8 @@ WEBVTT
1 1
00:00:21.471 --> 00:00:26.643 00:00:21.471 --> 00:00:26.643
Melden Sie sich bei Ihrem Portalkonto an und erstellen Sie ein neues Projekt Melden Sie sich bei Ihrem Portalkonto an
und erstellen Sie ein neues Projekt
2 2
00:00:52.343 --> 00:00:57.114 00:00:52.343 --> 00:00:57.114
...@@ -10,15 +11,18 @@ Melden Sie sich bei Ihrem Portalkonto an und erstellen Sie ein neues Projekt ...@@ -10,15 +11,18 @@ Melden Sie sich bei Ihrem Portalkonto an und erstellen Sie ein neues Projekt
3 3
00:01:03.114 --> 00:01:08.171 00:01:03.114 --> 00:01:08.171
Laden Sie das Logo und die Bilder in den öffentlichen Ordner hoch Laden Sie das Logo und die Bilder
in den öffentlichen Ordner hoch
4 4
00:01:56.929 --> 00:02:01.157 00:01:56.929 --> 00:02:01.157
Laden Sie die Diagrammfigur in den Home-Ordner hoch Laden Sie die Diagrammfigur
in den Home-Ordner hoch
5 5
00:02:16.328 --> 00:02:21.541 00:02:16.328 --> 00:02:21.541
Bearbeiten Sie die Einstellungen für die Seite und die Teilnehmer Bearbeiten Sie die Einstellungen
für die Seite und die Teilnehmer
6 6
00:04:21.043 --> 00:04:24.329 00:04:21.043 --> 00:04:24.329
...@@ -46,7 +50,8 @@ Speichern Sie die Änderungen ...@@ -46,7 +50,8 @@ Speichern Sie die Änderungen
12 12
00:08:14.186 --> 00:08:18.814 00:08:14.186 --> 00:08:18.814
Warten Sie einige Sekunden, bis die Webseite veröffentlicht wird Warten Sie einige Sekunden,
bis die Webseite veröffentlicht wird
13 13
00:08:40.771 --> 00:08:42.414 00:08:40.771 --> 00:08:42.414
......
help/videos/serene_de.vtt 0 → 100644
View file @ 6b11573e
WEBVTT
00:00:20.271 --> 00:00:25.443
Melden Sie sich bei Ihrem Portalkonto an
und erstellen Sie ein neues Projekt
00:00:48.514 --> 00:00:53.286
Öffnen Sie Ihr Projekt im Transferportal gitlab
00:00:58.043 --> 00:01:03.100
Laden Sie Logos oder Bilder
in den öffentlichen Ordner hoch
00:02:17.243 --> 00:02:22.457
Bearbeiten Sie die Einstellungen
für die Seite und die Teilnehmer
00:03:16.817 --> 00:03:18.817
Bearbeiten Sie die Menüpunkte
00:04:17.933 --> 00:04:20.133
Bearbeiten Sie die Teilnehmer
00:05:18.783 --> 00:05:21.800
Entfernen Sie den persönlichen Website-Eintrag
00:06:21.717 --> 00:06:23.283
Speichern Sie die Änderungen
00:06:52.333 --> 00:06:54.200
Bearbeiten Sie die Startseite
00:08:15.667 --> 00:08:19.467
Entfernen Sie den Rest des Vorlageninhalts
00:08:54.433 --> 00:08:56.717
Restlichen Text hinzufügen
00:09:40.317 --> 00:09:41.983
Speichern Sie die Änderungen
00:10:04.833 --> 00:10:07.117
Ergebnisseite erstellen
00:10:16.917 --> 00:10:20.467
Kopieren Sie den Inhalt der Rohvorlage
00:10:33.850 --> 00:10:38.317
Erstellen Sie einen neuen Ordner im öffentlichen Ordner
00:10:51.600 --> 00:10:54.417
Erstellen Sie eine neue index.html-Datei
00:11:06.950 --> 00:11:10.267
Fügen Sie den Inhalt der Vorlage ein
00:11:14.583 --> 00:11:15.933
Speicher die Datei
00:11:24.600 --> 00:11:26.750
Laden Sie das Diagrammbild hoch
00:11:42.333 --> 00:11:44.533
Bearbeiten Sie die Ergebnisseite
00:13:04.750 --> 00:13:07.900
Ändern Sie die Quelle des Bildes
00:13:34.050 --> 00:13:37.883
Entfernen Sie den Rest des Vorlageninhalts
00:14:07.500 --> 00:14:09.133
Speichern Sie die Änderungen
00:14:20.367 --> 00:14:25.000
Warten Sie einige Sekunden,
bis die Webseite veröffentlicht wird
00:14:33.767 --> 00:14:36.450
Ihre Webseite ist veröffentlicht
00:14:45.183 --> 00:14:46.517
Besuchen Sie die URL
\ No newline at end of file
help/videos/serene_en.vtt 0 → 100644
View file @ 6b11573e
WEBVTT
1
00:00:20.271 --> 00:00:25.443
Sign into your portal account
and create a new project
2
00:00:48.514 --> 00:00:53.286
Open your project in the transfer portal gitlab
3
00:00:58.043 --> 00:01:03.100
Upload any logos
or images into the public folder
4
00:02:17.243 --> 00:02:22.457
Edit the settings for the
page and the participants
5
00:03:16.817 --> 00:03:18.817
Edit the menu items
6
00:04:17.933 --> 00:04:20.133
Edit the participants
7
00:05:18.783 --> 00:05:21.800
Remove the personal website entry
8
00:06:21.717 --> 00:06:23.283
Save the changes
9
00:06:52.333 --> 00:06:54.200
Edit the home page
10
00:08:15.667 --> 00:08:19.467
Remove the rest of the template content
11
00:08:54.433 --> 00:08:56.717
Add the remaining text
12
00:09:40.317 --> 00:09:41.983
Save the changes
13
00:10:04.833 --> 00:10:07.117
Create the outcome page
14
00:10:16.917 --> 00:10:20.467
Copy the contents of the raw template
15
00:10:33.850 --> 00:10:38.317
Create a new folder inside the public folder
16
00:10:51.600 --> 00:10:54.417
Create a new index.html file
17
00:11:06.950 --> 00:11:10.267
Paste the contents of the template
18
00:11:14.583 --> 00:11:15.933
Save the file
19
00:11:24.600 --> 00:11:26.750
Upload the chart image
20
00:11:42.333 --> 00:11:44.533
Edit the outcome page
21
00:13:04.750 --> 00:13:07.900
Change the source of the image
22
00:13:34.050 --> 00:13:37.883
Remove the rest of the template content
23
00:14:07.500 --> 00:14:09.133
Save the changes
24
00:14:20.367 --> 00:14:25.000
Wait a few seconds for the web page
to be published
25
00:14:33.767 --> 00:14:36.450
Your web page is published
26
00:14:45.183 --> 00:14:46.517
Visit the URL
js/player.js deleted 100644 → 0
View file @ ac8bd28a
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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal