Skip to Content

Wijzigen voor document Speler voor video's

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

Samenvatting

Details

Paginaeigenschappen
Inhoud
... ... @@ -17,8 +17,7 @@
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 - 'tekst': "$!o.getValue('tekst')"
20 + 'gecontroleerd': "$!o.getValue('hoofdstukken_gecontroleerd')"
22 22   }))
23 23  #end
24 24  #foreach ($c in $collectiontool.sort($clips, 'positie'))
... ... @@ -28,9 +28,7 @@
28 28  {{html clean="false"}}
29 29  <figure class="wb-clip" id="clip-$escapetool.xml($c.nummer)">
30 30  #if ("$!c.bijlage" != '' && $doc.getAttachment($c.bijlage))
31 - ## Subtitles: an attachment <video name>.nl.vtt next to the video, off by default (CC button in the player)
32 - #set ($vtt = $c.bijlage.replaceAll('\.mp4$', '.nl.vtt'))
33 - <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>
34 34  #else
35 35   <p class="wb-clip-ontbreekt">De video ontbreekt nog op deze pagina.</p>
36 36  #end
... ... @@ -43,30 +43,13 @@
43 43   #foreach ($p in $tc.split(':'))
44 44   #set ($sec = $sec * 60 + $mathtool.toInteger($p))
45 45   #end
46 - #set ($label = $line.replaceAll('^\S+\s+', ''))
47 - ## Optional reference after the label: "mm:ss Label >> Linktekst | adres" (adres: https://... or /...)
48 - #set ($refText = '')
49 - #set ($refUrl = '')
50 - #set ($at = $label.indexOf(' >> '))
51 - #if ($at > 0)
52 - #set ($ref = $label.substring($at + 4).trim())
53 - #set ($label = $label.substring(0, $at).trim())
54 - #set ($bar = $ref.lastIndexOf(' | '))
55 - #if ($bar > 0)
56 - #set ($candidate = $ref.substring($bar + 3).trim())
57 - #if ($candidate.matches('^(https://|/)[^\s"<>]+$'))
58 - #set ($refText = $ref.substring(0, $bar).trim())
59 - #set ($refUrl = $candidate)
60 - #end
61 - #end
62 - #end
63 - #set ($discard = $items.add({'t': $sec, 'tc': $tc, 'label': $label, 'refText': $refText, 'refUrl': $refUrl}))
43 + #set ($discard = $items.add({'t': $sec, 'tc': $tc, 'label': $line.replaceAll('^\S+\s+', '')}))
64 64   #end
65 65  #end
66 66  #if ($items.size() > 0)
67 67   <ol class="wb-hoofdstukken" aria-label="Hoofdstukken">
68 68   #foreach ($i in $items)
69 - <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>
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 70   #end
71 71   </ol>
72 72  #end
... ... @@ -75,24 +75,6 @@
75 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 76   #if ($items.size() > 0 && "$!c.gecontroleerd" != '1') <span class="wb-clip-let">Hoofdstukken nog niet gecontroleerd.</span>#{end}
77 77   </figcaption>
78 -#if ("$!c.tekst" != '')
79 - ## Transcript (field tekst, one line per sentence as "[mm:ss] text"); the field is searchable in the Kennisbank
80 - <details class="wb-tekst">
81 - <summary>Uitgeschreven tekst</summary>
82 - <p class="wb-tekst-let">Automatisch uitgeschreven uit de gesproken tekst; er kunnen fouten in staan.</p>
83 - <ol>
84 - #foreach ($raw in $c.tekst.split('\r?\n'))
85 - #set ($line = $raw.trim())
86 - #if ($line.matches('^\[\d{1,2}:\d{2}\]\s*.+$'))
87 - #set ($tc = $line.replaceAll('^\[(\d{1,2}:\d{2})\].*$', '$1'))
88 - #set ($parts = $tc.split(':'))
89 - #set ($sec = $mathtool.toInteger($parts[0]) * 60 + $mathtool.toInteger($parts[1]))
90 - <li><button type="button" data-t="$sec">$escapetool.xml($tc)</button> $escapetool.xml($line.replaceAll('^\[\d{1,2}:\d{2}\]\s*', ''))</li>
91 - #end
92 - #end
93 - </ol>
94 - </details>
95 -#end
96 96  </figure>
97 97  {{/html}}
98 98  #end
XWiki.JavaScriptExtension[0]
cache
... ... @@ -1,1 +1,0 @@
1 -long
code
... ... @@ -1,65 +1,0 @@
1 -// Syntess Atrium leren: chapter list under each clip. A click jumps to that moment and plays; while playing, the
2 -// current chapter is highlighted. A link to #clip-<nummer>@m:ss opens the page at that clip and moment.
3 -(function () {
4 - function seconds(tc) {
5 - return tc.split(':').reduce(function (total, part) { return total * 60 + parseInt(part, 10); }, 0);
6 - }
7 -
8 - function setup(fig) {
9 - if (fig.getAttribute('data-wb-klaar')) return;
10 - fig.setAttribute('data-wb-klaar', '1');
11 - var video = fig.querySelector('video');
12 - var buttons = Array.prototype.slice.call(fig.querySelectorAll('.wb-hoofdstukken button'));
13 - if (!video) return;
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 - buttons.forEach(function (button) {
26 - button.addEventListener('click', function () {
27 - video.currentTime = Number(button.getAttribute('data-t'));
28 - video.play();
29 - });
30 - });
31 -
32 - video.addEventListener('timeupdate', function () {
33 - var current = null;
34 - buttons.forEach(function (button) {
35 - if (Number(button.getAttribute('data-t')) <= video.currentTime + 0.25) current = button;
36 - });
37 - buttons.forEach(function (button) {
38 - var active = button === current;
39 - button.classList.toggle('wb-actief', active);
40 - if (active) button.setAttribute('aria-current', 'true'); else button.removeAttribute('aria-current');
41 - });
42 - });
43 - }
44 -
45 - function openFromHash() {
46 - var match = decodeURIComponent(location.hash).match(/^#clip-([0-9.]+)@([0-9:]+)$/);
47 - if (!match) return;
48 - var fig = document.getElementById('clip-' + match[1]);
49 - var video = fig && fig.querySelector('video');
50 - if (!video) return;
51 - var start = seconds(match[2]);
52 - var jump = function () { video.currentTime = start; };
53 - if (video.readyState >= 1) jump(); else video.addEventListener('loadedmetadata', jump, { once: true });
54 - fig.scrollIntoView({ block: 'start' });
55 - }
56 -
57 - function init() {
58 - Array.prototype.forEach.call(document.querySelectorAll('figure.wb-clip'), setup);
59 - openFromHash();
60 - }
61 -
62 - if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init); else init();
63 - window.addEventListener('hashchange', openFromHash);
64 -})();
65 -
name
... ... @@ -1,1 +1,0 @@
1 -Hoofdstukken bij clips
parse
... ... @@ -1,1 +1,0 @@
1 -Nee
use
... ... @@ -1,1 +1,0 @@
1 -onDemand
XWiki.StyleSheetExtension[0]
Caching policy
... ... @@ -1,1 +1,0 @@
1 -long
Code
... ... @@ -1,123 +1,0 @@
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,1 +1,0 @@
1 -CSS
Naam
... ... @@ -1,1 +1,0 @@
1 -Opmaak speler
Inhoud verwerken
... ... @@ -1,1 +1,0 @@
1 -Nee
Gebruik deze uitbreiding
... ... @@ -1,1 +1,0 @@
1 -onDemand
XWiki.XWikiRights[0]
allow
... ... @@ -1,1 +1,0 @@
1 -Sta toe
levels
... ... @@ -1,1 +1,0 @@
1 -view
users
... ... @@ -1,1 +1,0 @@
1 -XWiki.XWikiGuest
XWiki.XWikiRights[1]
allow
... ... @@ -1,1 +1,0 @@
1 -Sta toe
groups
... ... @@ -1,1 +1,0 @@
1 -XWiki.XWikiAllGroup
levels
... ... @@ -1,1 +1,0 @@
1 -view
XWiki.XWikiRights[2]
allow
... ... @@ -1,1 +1,0 @@
1 -Sta toe
groups
... ... @@ -1,1 +1,0 @@
1 -XWiki.XWikiAdminGroup
levels
... ... @@ -1,1 +1,0 @@
1 -view,edit,comment,script