Skip to Content

Wijzigen voor document Speler voor video's

Laatst gewijzigd door Jeeves de Butler op 09-10-2026 10:34
Van versie 3.1
gewijzigd door Jeeves de Butler
op 06-10-2026 04:09
Opmerking bij wijziging: Er is geen opmerking bij deze versie
Naar versie 14.1
gewijzigd door Jeeves de Butler
op 09-10-2026 10:15
Opmerking bij wijziging: Er is geen opmerking bij deze versie

Samenvatting

Details

Paginaeigenschappen
Titel
... ... @@ -1,1 +1,1 @@
1 -Speler Syntess Atrium leren
1 +Speler voor video's
Inhoud
... ... @@ -1,8 +1,9 @@
1 1  {{velocity}}
2 -## Shows the Syntess Atrium Zelfstudie clips of the including page: one figure per Wardenburg.Code.AtriumClipClass
3 -## object (sorted on positie), with an HTML5 player and a clickable chapter list. The video itself is an attachment of
4 -## the including page, so it is only visible to people who may read that page. Used through
5 -## {{include reference="Wardenburg.Code.AtriumClips"/}} on the pages under Syntess Atrium leren.
2 +## The standard video player of the Kennisbank (despite its name, for every video, not only Syntess Atrium): one
3 +## figure per Wardenburg.Code.AtriumClipClass object of the including page (sorted on positie), with an HTML5 player,
4 +## a clickable chapter list, optional subtitles (<video>.nl.vtt) and a collapsible transcript. The video itself is an
5 +## attachment of the including page, so it is only visible to people who may read that page.
6 +## Used through {{include reference="Wardenburg.Code.AtriumClips"/}}; the Syntess source line only shows for Syntess clips.
6 6  #set ($discard = $xwiki.ssx.use('Wardenburg.Code.AtriumClips'))
7 7  #set ($discard = $xwiki.jsx.use('Wardenburg.Code.AtriumClips'))
8 8  #set ($clips = [])
... ... @@ -17,7 +17,8 @@
17 17   'showcase': "$!o.getValue('vimeo_showcase')",
18 18   'geupload': "$!o.getValue('geupload')",
19 19   'hoofdstukken': "$!o.getValue('hoofdstukken')",
20 - 'gecontroleerd': "$!o.getValue('hoofdstukken_gecontroleerd')"
21 + 'gecontroleerd': "$!o.getValue('hoofdstukken_gecontroleerd')",
22 + 'tekst': "$!o.getValue('tekst')"
21 21   }))
22 22  #end
23 23  #foreach ($c in $collectiontool.sort($clips, 'positie'))
... ... @@ -27,7 +27,9 @@
27 27  {{html clean="false"}}
28 28  <figure class="wb-clip" id="clip-$escapetool.xml($c.nummer)">
29 29  #if ("$!c.bijlage" != '' && $doc.getAttachment($c.bijlage))
30 - <video controls preload="metadata" playsinline src="$doc.getAttachmentURL($c.bijlage)"#if ("$!c.poster" != '' && $doc.getAttachment($c.poster)) poster="$doc.getAttachmentURL($c.poster)"#{end}></video>
32 + ## Subtitles: an attachment <video name>.nl.vtt next to the video, off by default (CC button in the player)
33 + #set ($vtt = $c.bijlage.replaceAll('\.mp4$', '.nl.vtt'))
34 + <video controls preload="metadata" playsinline src="$doc.getAttachmentURL($c.bijlage)"#if ("$!c.poster" != '' && $doc.getAttachment($c.poster)) poster="$doc.getAttachmentURL($c.poster)"#{end}>#if ($vtt != $c.bijlage && $doc.getAttachment($vtt))<track kind="subtitles" srclang="nl" label="Nederlands" src="$doc.getAttachmentURL($vtt)">#{end}</video>
31 31  #else
32 32   <p class="wb-clip-ontbreekt">De video ontbreekt nog op deze pagina.</p>
33 33  #end
... ... @@ -40,21 +40,56 @@
40 40   #foreach ($p in $tc.split(':'))
41 41   #set ($sec = $sec * 60 + $mathtool.toInteger($p))
42 42   #end
43 - #set ($discard = $items.add({'t': $sec, 'tc': $tc, 'label': $line.replaceAll('^\S+\s+', '')}))
47 + #set ($label = $line.replaceAll('^\S+\s+', ''))
48 + ## Optional reference after the label: "mm:ss Label >> Linktekst | adres" (adres: https://... or /...)
49 + #set ($refText = '')
50 + #set ($refUrl = '')
51 + #set ($at = $label.indexOf(' >> '))
52 + #if ($at > 0)
53 + #set ($ref = $label.substring($at + 4).trim())
54 + #set ($label = $label.substring(0, $at).trim())
55 + #set ($bar = $ref.lastIndexOf(' | '))
56 + #if ($bar > 0)
57 + #set ($candidate = $ref.substring($bar + 3).trim())
58 + #if ($candidate.matches('^(https://|/)[^\s"<>]+$'))
59 + #set ($refText = $ref.substring(0, $bar).trim())
60 + #set ($refUrl = $candidate)
61 + #end
62 + #end
63 + #end
64 + #set ($discard = $items.add({'t': $sec, 'tc': $tc, 'label': $label, 'refText': $refText, 'refUrl': $refUrl}))
44 44   #end
45 45  #end
46 46  #if ($items.size() > 0)
47 47   <ol class="wb-hoofdstukken" aria-label="Hoofdstukken">
48 48   #foreach ($i in $items)
49 - <li><button type="button" data-t="$i.t"><span class="wb-t">$escapetool.xml($i.tc)</span><span class="wb-label">$escapetool.xml($i.label)</span></button></li>
70 + <li><button type="button" data-t="$i.t"><span class="wb-t">$escapetool.xml($i.tc)</span><span class="wb-label">$escapetool.xml($i.label)</span></button>#if ("$!i.refUrl" != '')<a class="wb-ref" href="$escapetool.xml($i.refUrl)">$escapetool.xml($i.refText)</a>#{end}</li>
50 50   #end
51 51   </ol>
52 52  #end
53 53   <figcaption>
54 54   #if ("$!c.duur" != '')Duur $escapetool.xml($c.duur). #{end}
55 - 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.showcase" != '')Bron: Syntess Atrium Zelfstudie, <a href="https://vimeo.com/showcase/$escapetool.url($c.showcase)" target="_blank" rel="noopener">alle clips van deze paragraaf</a>.#{end}
56 56   #if ($items.size() > 0 && "$!c.gecontroleerd" != '1') <span class="wb-clip-let">Hoofdstukken nog niet gecontroleerd.</span>#{end}
57 57   </figcaption>
79 +#if ("$!c.tekst" != '')
80 + ## Transcript (field tekst, one line per sentence as "[mm:ss] text"); the field is searchable in the Kennisbank
81 + <details class="wb-tekst">
82 + <summary>Uitgeschreven tekst</summary>
83 + <p class="wb-tekst-let">Automatisch uitgeschreven uit de gesproken tekst; er kunnen fouten in staan.</p>
84 + <ol>
85 + #foreach ($raw in $c.tekst.split('\r?\n'))
86 + #set ($line = $raw.trim())
87 + #if ($line.matches('^\[\d{1,2}:\d{2}\]\s*.+$'))
88 + #set ($tc = $line.replaceAll('^\[(\d{1,2}:\d{2})\].*$', '$1'))
89 + #set ($parts = $tc.split(':'))
90 + #set ($sec = $mathtool.toInteger($parts[0]) * 60 + $mathtool.toInteger($parts[1]))
91 + <li><button type="button" data-t="$sec">$escapetool.xml($tc)</button> $escapetool.xml($line.replaceAll('^\[\d{1,2}:\d{2}\]\s*', ''))</li>
92 + #end
93 + #end
94 + </ol>
95 + </details>
96 +#end
58 58  </figure>
59 59  {{/html}}
60 60  #end
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]
Caching policy
... ... @@ -1,0 +1,1 @@
1 +long
Code
... ... @@ -1,0 +1,123 @@
1 +/* Syntess Atrium leren: player with chapter list (Wardenburg.Code.AtriumClips) */
2 +.wb-clip {
3 + margin: 0.5em 0 2em;
4 + max-width: 960px;
5 +}
6 +.wb-clip video {
7 + display: block;
8 + width: 100%;
9 + aspect-ratio: 16 / 9;
10 + background: #000;
11 + border: 1px solid #ddd;
12 +}
13 +.wb-hoofdstukken {
14 + list-style: none;
15 + margin: 0;
16 + padding: 0;
17 + border: 1px solid #ddd;
18 + border-top: 0;
19 +}
20 +.wb-hoofdstukken li {
21 + margin: 0;
22 + border-top: 1px solid #eee;
23 +}
24 +.wb-hoofdstukken li:first-child {
25 + border-top: 0;
26 +}
27 +.wb-hoofdstukken button {
28 + display: flex;
29 + gap: 0.9em;
30 + width: 100%;
31 + padding: 0.45em 0.75em;
32 + border: 0;
33 + background: #fff;
34 + color: inherit;
35 + font: inherit;
36 + text-align: left;
37 + cursor: pointer;
38 +}
39 +.wb-hoofdstukken button:hover,
40 +.wb-hoofdstukken button:focus-visible {
41 + background: #f6f6f6;
42 +}
43 +.wb-hoofdstukken button.wb-actief {
44 + background: #FFF0DA;
45 + box-shadow: inset 4px 0 0 #FFB447;
46 +}
47 +.wb-hoofdstukken .wb-t {
48 + min-width: 3.2em;
49 + color: #666;
50 + font-variant-numeric: tabular-nums;
51 +}
52 +.wb-hoofdstukken .wb-ref {
53 + display: block;
54 + /* 4.85em of the button text, measured in this smaller font: lines up with the chapter name */
55 + padding: 0 0.75em 0.45em 5.39em;
56 + font-size: 0.9em;
57 +}
58 +.wb-hoofdstukken .wb-ref::before {
59 + content: "Zie";
60 + display: inline-block;
61 + margin-right: 0.3em;
62 + color: #666;
63 +}
64 +.wb-hoofdstukken button.wb-actief + .wb-ref {
65 + background: #FFF0DA;
66 + box-shadow: inset 4px 0 0 #FFB447;
67 +}
68 +.wb-clip figcaption {
69 + margin-top: 0.4em;
70 + color: #666;
71 + font-size: 0.9em;
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 +}
115 +.wb-clip-let {
116 + color: #8a5a00;
117 +}
118 +.wb-clip-ontbreekt {
119 + padding: 1em;
120 + border: 1px dashed #ccc;
121 + color: #666;
122 +}
123 +
Content Type
... ... @@ -1,0 +1,1 @@
1 +CSS
Naam
... ... @@ -1,0 +1,1 @@
1 +Opmaak speler
Inhoud verwerken
... ... @@ -1,0 +1,1 @@
1 +Nee
Gebruik deze uitbreiding
... ... @@ -1,0 +1,1 @@
1 +onDemand
XWiki.XWikiRights[1]
allow
... ... @@ -1,0 +1,1 @@
1 +Sta toe
groups
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiAllGroup
levels
... ... @@ -1,0 +1,1 @@
1 +view
XWiki.XWikiRights[2]
allow
... ... @@ -1,0 +1,1 @@
1 +Sta toe
groups
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiAdminGroup
levels
... ... @@ -1,0 +1,1 @@
1 +view,edit,comment,script