Skip to Content

Wijzigen voor document Speler voor video's

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

Samenvatting

Details

Paginaeigenschappen
Titel
... ... @@ -1,1 +1,1 @@
1 -Speler voor video's
1 +Speler Syntess Atrium leren
Inhoud
... ... @@ -1,9 +1,8 @@
1 1  {{velocity}}
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.
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.
7 7  #set ($discard = $xwiki.ssx.use('Wardenburg.Code.AtriumClips'))
8 8  #set ($discard = $xwiki.jsx.use('Wardenburg.Code.AtriumClips'))
9 9  #set ($clips = [])
... ... @@ -18,8 +18,7 @@
18 18   'showcase': "$!o.getValue('vimeo_showcase')",
19 19   'geupload': "$!o.getValue('geupload')",
20 20   'hoofdstukken': "$!o.getValue('hoofdstukken')",
21 - 'gecontroleerd': "$!o.getValue('hoofdstukken_gecontroleerd')",
22 - 'tekst': "$!o.getValue('tekst')"
20 + 'gecontroleerd': "$!o.getValue('hoofdstukken_gecontroleerd')"
23 23   }))
24 24  #end
25 25  #foreach ($c in $collectiontool.sort($clips, 'positie'))
... ... @@ -29,9 +29,7 @@
29 29  {{html clean="false"}}
30 30  <figure class="wb-clip" id="clip-$escapetool.xml($c.nummer)">
31 31  #if ("$!c.bijlage" != '' && $doc.getAttachment($c.bijlage))
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>
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>
35 35  #else
36 36   <p class="wb-clip-ontbreekt">De video ontbreekt nog op deze pagina.</p>
37 37  #end
... ... @@ -73,27 +73,9 @@
73 73  #end
74 74   <figcaption>
75 75   #if ("$!c.duur" != '')Duur $escapetool.xml($c.duur). #{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}
72 + 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}.
77 77   #if ($items.size() > 0 && "$!c.gecontroleerd" != '1') <span class="wb-clip-let">Hoofdstukken nog niet gecontroleerd.</span>#{end}
78 78   </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
97 97  </figure>
98 98  {{/html}}
99 99  #end
XWiki.JavaScriptExtension[0]
code
... ... @@ -10,18 +10,8 @@
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) return;
13 + if (!video || !buttons.length) 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 -
25 25   buttons.forEach(function (button) {
26 26   button.addEventListener('click', function () {
27 27   video.currentTime = Number(button.getAttribute('data-t'));
XWiki.StyleSheetExtension[0]
Code
... ... @@ -49,69 +49,11 @@
49 49   color: #666;
50 50   font-variant-numeric: tabular-nums;
51 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 68  .wb-clip figcaption {
69 69   margin-top: 0.4em;
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 -}
115 115  .wb-clip-let {
116 116   color: #8a5a00;
117 117  }