Skip to Content

Wijzigen voor document Speler voor video's

Laatst gewijzigd door Jeeves de Butler op 09-10-2026 10:34
Van versie 10.1
gewijzigd door Jeeves de Butler
op 07-10-2026 09:08
Opmerking bij wijziging: Er is geen opmerking bij deze versie
Naar versie 13.1
gewijzigd door Jeeves de Butler
op 09-10-2026 10:08
Opmerking bij wijziging: Er is geen opmerking bij deze versie

Samenvatting

Details

Paginaeigenschappen
Verborgen
... ... @@ -1,1 +1,1 @@
1 -true
1 +false
Inhoud
... ... @@ -18,7 +18,8 @@
18 18   'geupload': "$!o.getValue('geupload')",
19 19   'hoofdstukken': "$!o.getValue('hoofdstukken')",
20 20   'gecontroleerd': "$!o.getValue('hoofdstukken_gecontroleerd')",
21 - 'tekst': "$!o.getValue('tekst')"
21 + 'tekst': "$!o.getValue('tekst')",
22 + 'bron': "$!o.getValue('bron')"
22 22   }))
23 23  #end
24 24  #foreach ($c in $collectiontool.sort($clips, 'positie'))
... ... @@ -72,7 +72,7 @@
72 72  #end
73 73   <figcaption>
74 74   #if ("$!c.duur" != '')Duur $escapetool.xml($c.duur). #{end}
75 - Bron: Syntess Atrium Zelfstudie#if ("$!c.showcase" != ''), <a href="https://vimeo.com/showcase/$escapetool.url($c.showcase)" target="_blank" rel="noopener">alle clips van deze paragraaf</a>#{end}.
76 + #if ("$!c.bron" != '')Bron: $escapetool.xml($c.bron).#{else}Bron: Syntess Atrium Zelfstudie#if ("$!c.showcase" != ''), <a href="https://vimeo.com/showcase/$escapetool.url($c.showcase)" target="_blank" rel="noopener">alle clips van deze paragraaf</a>#{end}.#end
76 76   #if ($items.size() > 0 && "$!c.gecontroleerd" != '1') <span class="wb-clip-let">Hoofdstukken nog niet gecontroleerd.</span>#{end}
77 77   </figcaption>
78 78  #if ("$!c.tekst" != '')
XWiki.JavaScriptExtension[0]
code
... ... @@ -10,8 +10,18 @@
10 10   fig.setAttribute('data-wb-klaar', '1');
11 11   var video = fig.querySelector('video');
12 12   var buttons = Array.prototype.slice.call(fig.querySelectorAll('.wb-hoofdstukken button'));
13 - if (!video || !buttons.length) return;
13 + if (!video) return;
14 14  
15 + // The times in the transcript jump as well, without highlighting
16 + Array.prototype.forEach.call(fig.querySelectorAll('.wb-tekst button'), function (button) {
17 + button.addEventListener('click', function () {
18 + video.currentTime = Number(button.getAttribute('data-t'));
19 + video.play();
20 + video.scrollIntoView({ block: 'nearest' });
21 + });
22 + });
23 + if (!buttons.length) return;
24 +
15 15   buttons.forEach(function (button) {
16 16   button.addEventListener('click', function () {
17 17   video.currentTime = Number(button.getAttribute('data-t'));
XWiki.StyleSheetExtension[0]
Code
... ... @@ -70,6 +70,48 @@
70 70   color: #666;
71 71   font-size: 0.9em;
72 72  }
73 +.wb-tekst {
74 + margin-top: 0.6em;
75 + border: 1px solid #ddd;
76 +}
77 +.wb-tekst summary {
78 + padding: 0.45em 0.75em;
79 + cursor: pointer;
80 + color: #444;
81 +}
82 +.wb-tekst[open] summary {
83 + border-bottom: 1px solid #eee;
84 +}
85 +.wb-tekst ol {
86 + list-style: none;
87 + margin: 0;
88 + padding: 0.4em 0.75em 0.6em;
89 + max-height: 24em;
90 + overflow-y: auto;
91 +}
92 +.wb-tekst li {
93 + margin: 0.15em 0;
94 +}
95 +.wb-tekst button {
96 + margin-right: 0.5em;
97 + padding: 0;
98 + border: 0;
99 + background: none;
100 + color: #666;
101 + font: inherit;
102 + font-variant-numeric: tabular-nums;
103 + cursor: pointer;
104 +}
105 +.wb-tekst button:hover,
106 +.wb-tekst button:focus-visible {
107 + color: inherit;
108 + text-decoration: underline;
109 +}
110 +.wb-tekst-let {
111 + margin: 0.4em 0.75em 0;
112 + color: #8a5a00;
113 + font-size: 0.9em;
114 +}
73 73  .wb-clip-let {
74 74   color: #8a5a00;
75 75  }